IE中的CSS旋转属性

Question

我想将DIV旋转到一定程度。在FF中它可以运行，但是在IE中我面临一个问题。

例如，在以下样式中，我可以将rotation = 1设置为4

 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

这意味着DIV将旋转到90或180或270或360度。但是，如果我只需要将DIV旋转20度，那么它将不再起作用。

如何在IE中解决此问题？

Answer 1

要在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', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

您将从上面的内容中注意到IE8与IE6 / 7具有不同的语法。如果要支持IE的所有版本，则需要提供两行代码。

弧度中有可怕的数字。如果您要使用45度以外的角度，则需要自己计算出数字（如果要寻找）。

还要注意，由于过滤器字符串中的冒号符号未转义，因此IE6/7语法会导致其他浏览器出现问题，这意味着它是无效的CSS。在我的测试中，这会导致Firefox忽略过滤器之后的所有CSS代码。这是您需要注意的事情，如果被它所吸引，可能会导致数小时的混乱。我通过在其他浏览器无法加载的单独的样式表中包含特定于IE的内容来解决此问题。

当前所有其他浏览器（包括IE9和IE10-是的！）都支持CSS3transform样式（尽管通常带有供应商前缀），因此您可以使用以下代码在所有其他浏览器中实现相同的效果：

-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) */

希望能有所帮助。

编辑

由于此答案仍在投票中，因此我觉得我应该使用有关称为CSSSandpaper的JavaScript库的信息来更新它，即使在较旧的IE版本中，该库也允许您使用（接近）标准CSS代码进行旋转。

将CSS沙纸添加到您的站点后，您应该能够为IE6-8编写以下CSS代码：

-sand-transform: rotate(40deg);

比filter您通常需要在IE中使用的传统样式容易得多。

编辑

还要注意一个专门针对IE9（仅适用于IE9）的怪癖，它同时支持标准transformIE和旧样式IE -ms- filter。如果同时指定了它们，则可能导致IE9完全混乱，并仅在元素原本所在的位置呈现一个纯黑框。最好的解决方案是filter使用上面提到的“Sandpaper” polyfill 避免样式。