如何在Internet Explorer中将div渲染成倾斜角度

Question

如何在Internet Explorer中将div渲染成倾斜角度

3

我为客户设计并建立了一个网站。它几乎完成了（如果您使用Chrome或Firefox查看，那么它就是完整的）。

设计的一部分显示了一个类似于极光相片的东西，位于屏幕左上角，呈倾斜状态。它由一个Div和一个图像组成。目前的代码使Div倾斜，同时内部的图像也会改变。

然而，当前使用的代码：

transform: rotate(-7deg);
-webkit-transform: rotate(-7deg); /* Safari and Chrome */
-o-transform: rotate(-7deg); /* Opera */
-moz-transform: rotate(-7deg); /* Firefox */

不支持任何版本的Internet Explorer。然而客户使用的是IE，他们非常想让它看起来像这样，因此一直在给我压力。（顺便说一下，这个客户是那种“形式胜过功能”的人）。

我该怎么做才能使div倾斜？

编辑：我已经使用了CssSandpaper插件，并且它做到了我需要的效果，但只到某个程度。您可以在这里看到图片已经倾斜了。然而，当我使用循环插件时，当图像更改时，它会消失，然后重新出现。我不知道是什么原因？

- mickburkejnr

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sandeep · Accepted Answer

IE8及以下版本不支持rotate属性。因此，您必须使用IE filter称为matrixfilter

尝试这个：

/* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.992546151641322, M12=0.12186934340514761, M21=-0.12186934340514761, M22=0.992546151641322, SizingMethod='auto expand')";

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.992546151641322,
            M12=0.12186934340514761,
            M21=-0.12186934340514761,
            M22=0.992546151641322,
            SizingMethod='auto expand');

你可以从这里生成 filter:

http://www.useragentman.com/IETransformsTranslator/index.html