CSSを使用して画像を回転するクロスブラウザの方法ですか？

Question

私は主なコンテンツ領域を持っているサイトレイアウトを持っていますし、 のコンテンツエリアの四隅のそれぞれにコーナーグラフィックがあります。 全体の効果は、デスク・ブロッターの効果です。

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

むしろ4つの個別のコーナー画像を作るよりも、私は、元の画像を使用している（可能であれば） をしたいと思っ（corner.png：ここ

は私の左上隅のコードです）、それを CSSを使用して回転させます。

これを行うにはクロスブラウザ対応の方法はありますか？

多くの感謝！

Answer 1

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

45度回転するCSS：

.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はここから来た：CSS rotate property in IE