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

我有一个网站布局，我正在努力，有一个主要的内容区域，然后在内容区域的四个角落的每一个角落图形。整体效果是桌面记事本的效果。跨浏览器的方式来使用CSS旋转图像？

这里是我的左上角代码：

.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 ）并使用 CSS旋转它。

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

非常感谢！

来源

2012-08-06 Cynthia

谷歌搜索会给你答案：HTTP：//答案.oreilly.com/topic/1004-how-to-rotate-an-image-with-css/ – xbonez 2012-08-06 16:20:54

我确实先搜索过谷歌。该链接没有出现在我翻看的结果的头10 *页*中的任何地方（搜索词是'css rotate background image'）。由于许多我看到的例子都不是跨浏览器兼容的，我来到了这里。 Thx的链接虽然。 – Cynthia 2012-08-06 16:27:59

您最好使用4种不同的图像，因为CSS转换在IE 7和IE 8中不起作用。 – 2012-08-06 16:37:16

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

来源

2012-08-06 16:46:15

这对于在其中没有透明元素的图像非常有用！谢谢:)我只是因为我在IE8中检查了jfiddle，并且它正在玩阴影和透明度。尽管如此，这是IE浏览器。再次感谢！ – Cynthia 2012-08-06 16:54:46

这正是CSS糟糕的原因。标准缺乏标准。 – janek37 2013-09-02 14:02:59

@ janek37它缺乏，明确在这种情况下没有标准。将标准的“旋转（45deg）”作为所有浏览器特定标题的横幅是很好的。 – 23inhouse 2014-02-17 10:29:39

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

回答

相关问题