सीएसएस का उपयोग कर छवि घुमाने के लिए क्रॉस ब्राउज़र तरीका?

Question

मेरे पास एक साइट लेआउट है जिस पर मैं काम कर रहा हूं जिसमें मुख्य सामग्री क्षेत्र है और फिर सामग्री क्षेत्र के चार कोनों में से प्रत्येक पर कोने ग्राफ़िक बैठता है। समग्र प्रभाव एक डेस्क ब्लॉटर का है।

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

चार अलग-अलग कोने छवियों बनाने के बजाय, मैं क्या करने के लिए (यदि संभव हो) मूल छवि का उपयोग करें चाहते हैं (corner.png:

यहाँ मेरी ऊपरी बाएं कोने के लिए कोड है) और सीएसएस का उपयोग करके इसे घुमाएं।

क्या ऐसा करने के लिए एक क्रॉस ब्राउज़र संगत तरीका है?

बहुत धन्यवाद!

Answer 1

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

सीएसएस 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 rotate property in IE