跨浏览器的方式来使用CSS旋转图像？

我有一个网站布局，我正在工作，有一个主要的内容区域，然后在内容区域的四个angular落的每一个angular落的graphics。 整体效果是桌面记事本的效果。

这是我的左上angular的代码：

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

而不是做四个angular落的图像，我想要做的（如果可能）是使用原始图像（corner.png），并使用CSS旋转它。

有没有一个跨浏览器兼容的方式来做到这一点？

非常感谢！

Answer 1

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

CSS旋转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来自这里： CSS在IE中旋转属性