html中旋转属性,CSS的旋转属性在IE

要在IE中旋转45度，您需要在样式表中使用以下代码：

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.7071067811865476,M12=-0.7071067811865475,M21=0.7071067811865475,M22=0.7071067811865476); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M22=0.7071067811865476)"; /* IE8 */

你会注意到从上面的IE8有不同的语法到IE6 / 7。如果要支持所有版本的IE，您需要提供两行代码。

可怕的数字有在Radians;如果你想使用45度以外的角度(如果你在互联网上有tutorials)，你需要为自己制定数字。

还要注意，IE6 / 7语法会导致其他浏览器的问题，因为过滤字符串中的未转义的冒号符号，这意味着它是无效的CSS。在我的测试中，这会导致Firefox忽略过滤器之后的所有CSS代码。这是你需要注意的，因为它可能会导致混乱的时候，如果你被抓住了。我通过在其他浏览器没有加载的单独的样式表中的IE特定的东西解决这个问题。

所有其他当前浏览器(包括IE9和IE10 – yay！)支持CSS3转换风格(尽管通常使用供应商前缀)，因此您可以使用以下代码在所有其他浏览器中实现相同的效果：

-moz-transform: rotate(45deg); /* FF3.5/3.6 */

-o-transform: rotate(45deg); /* Opera 10.5 */

-webkit-transform: rotate(45deg); /* Saf3.1+ */

transform: rotate(45deg); /* Newer browsers (incl IE9) */

希望有帮助。

编辑

由于这个答案仍然是up-vote，我觉得我应该更新它的一个JavaScript库称为CSS Sandpaper，允许你使用(附近)标准CSS代码旋转，即使在旧的IE版本。

一旦你添加CSS砂纸到你的网站，你应该可以写下面的CSS代码为IE6-8：

-sand-transform: rotate(40deg);

比通常需要在IE中使用的传统过滤器样式更容易。

编辑

还要注意一个额外的奇怪，特别是与IE9(和只有IE9)，它支持标准变换和旧样式IE -ms过滤器。如果你有两个指定，这可能导致IE9完全混淆和渲染一个坚实的黑盒子的元素本来是。最好的解决方案是通过使用上面提到的砂纸polyfill避免过滤器样式。