Làm cách nào để xoay hình ảnh bằng cách sử dụng CSS?

Question

Tôi có bố cục trang web mà tôi đang làm việc trên đó có một khu vực nội dung chính và sau đó tại mỗi trong bốn góc của khu vực nội dung là một hình ảnh góc. Hiệu ứng tổng thể của là của một bàn làm mờ.

Đây là mã cho góc trên bên trái của tôi:

.corner-top-left { width:96px ; 
height:96px ; 
background:url("images/corner.png") no-repeat ; 
position:absolute ; 
top:-5px ; 
left:-5px ; 
z-index:3000 ; 
} 

Thay vì làm cho bốn hình ảnh góc cá nhân, những gì tôi muốn làm (nếu có thể) là sử dụng hình ảnh ban đầu (corner.png) và xoay nó bằng cách sử dụng CSS.

Có cách nào tương thích với trình duyệt chéo để thực hiện việc này không?

Rất cám ơn!

Answer 1

http://jsfiddle.net/tJkgP/2/

CSS để xoay 45 độ:

.desk 
{ 
    width: 50%; 
    height: 400px; 
    margin: 5em auto; 
    border: solid 1px #000; 
    overflow: visible; 
} 
.desk img 
{ 
    behavior:url(-ms-transform.htc); 
    /* Firefox */ 
    -moz-transform:rotate(45deg); 
    /* Safari and Chrome */ 
    -webkit-transform:rotate(45deg); 
    /* Opera */ 
    -o-transform:rotate(45deg); 
    /* IE9 */ 
    -ms-transform:rotate(45deg); 
    /* IE6,IE7 */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); 
    /* IE8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; 

} 

IE6-8 CSS đến từ đây: CSS rotate property in IE