CSS kullanarak görüntüyü döndürmek için çapraz tarayıcı yolu?

Question

Çalıştığım site yerleşimi üzerinde ana içerik alanı olan ve daha sonra da içerik alanının dört köşesinin her birinde bir köşe grafiği bulunuyor. genel etkisi, bir masa kurutma kağıdıdır.

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

Aksine dört ayrı köşe görüntüleri yapmaktansa, ne orijinal resim kullanmak olduğunu (mümkünse) yapmak istiyorum (corner.png: Burada

benim sol üst köşesinde kodudur) ve CSS kullanarak döndürün.

Bunu yapmak için çapraz tarayıcı uyumlu bir yol var mı?

Çok teşekkürler!

Answer 1

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

CSS 45 derece döndürmek için:

.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 buradan kaynaklandığını: CSS rotate property in IE