使用 CSS 旋转图像的跨浏览器方式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11832131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cross browser way to rotate image using CSS?
提问by Cynthia
I have a site layout I'm working on that has a main content area and then at each of the four corners of the content area sits a corner graphic. The overall effect is that of a desk blotter.
我有一个我正在处理的站点布局，它有一个主要内容区域，然后在内容区域的四个角中的每个角都有一个角图形。整体效果是一张办公桌吸墨纸。
Here is the code for my top left hand corner:
这是我左上角的代码：
.corner-top-left { width:96px ;
height:96px ;
background:url("images/corner.png") no-repeat ;
position:absolute ;
top:-5px ;
left:-5px ;
z-index:3000 ;
}
Rather than make four individual corner images, what I would like to do (if possible) is use the original image (corner.png) and rotate it using CSS.
而不是制作四个单独的角图像，我想做的（如果可能）是使用原始图像（corner.png）并使用 CSS 旋转它。
Is there a cross browser compatible way to do this?
是否有跨浏览器兼容的方式来做到这一点？
Many thanks!
非常感谢！
回答by Alex W
CSS to rotate by 45 degrees:
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 came from here: CSS rotate property in IE
IE6-8 CSS 来自这里：IE 中的 CSS 旋转属性
