IE 中的 CSS 旋转属性

我想要在一定程度上旋转 DIV。在 FF 它的功能，但在 IE 我正面临着一个问题。

例如，在下面的样式中，我可以设置旋转 = 1到4

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

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

我如何在 IE 中解决这个问题？

140351 次浏览
小开

你需要像下面这样做一个矩阵变换:

filter: progid:DXImageTransform.Microsoft.Matrix(
M11 = COS_THETA,
M12 = -SIN_THETA,
M21 = SIN_THETA,
M22 = COS_THETA,
sizingMethod = 'auto expand'
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
M11 = COS_THETA,
M12 = -SIN_THETA,
M21 = SIN_THETA,
M22 = COS_THETA,
SizingMethod = 'auto expand'
)";

其中 COS _ THETA 和 SIN _ THTA 是角度的余弦和正弦值(即 0.70710678为45 & deg;)。

小开

Http://css3please.com/

对于 MicrosoftIE9 + 前缀，向下滚动到“ . box _ rol”。 这里也有类似的讨论: < a href = “ https://stackoverflow. com/questions/382591/Rotating-a-Div-Element-in-jQuery”> Rotating a Div Element in jQuery

小开
最佳答案

要在 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)支持 CSS3 transform风格(尽管通常使用厂商前缀) ，因此您可以使用以下代码在所有其他浏览器中实现同样的效果:

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

希望能帮上忙。

剪辑

由于这个答案仍然在得到支持，我觉得我应该更新它与一个叫做 砂纸的 JavaScript 库的信息，它允许你使用(接近)标准的 CSS 代码进行旋转，即使是在旧的 IE 版本中。

一旦你添加了 CSS 砂纸到你的网站，你应该能够为 IE6-8编写下面的 CSS 代码:

-sand-transform: rotate(40deg);

比你通常在 IE 中使用的传统 filter风格要容易得多。

剪辑

还要注意一个特别针对 IE9(并且只针对 IE9)的特性，它同时支持标准的 transform和旧样式的 IE-ms-filter。如果你同时指定了这两个元素，这可能会导致 IE9完全混淆，并且在元素所在的位置呈现出一个实心的黑盒子。最好的解决办法是避免 filter风格使用砂纸填充上述。

小开

存在一个名为 IETransformsTranslator 的在线工具。有了这个工具，你可以使矩阵过滤器转换什么工作在 IE6，IE7和 IE8。只要粘贴你的 CSS3转换函数(例如旋转(15deg)) ，它就会完成剩下的工作。 Http://www.useragentman.com/ietransformstranslator/

小开

提示一下... 在移动设备上使用“ change: rotl()”，或者甚至“-ms-change: rotl()”(IE9)之前，请三思而后行！

我这几天一直在拼命敲墙。我有一个“动能”系统，可以滑动图像，最上面还有一个指挥区。我做了一个箭头按钮“转换”，所以它模拟指向上和下... 我已经审查了1.000多年的代码行! ! ！;-)

一切正常，一旦我删除转换: 从 CSS 旋转。 与其他浏览器相比，IE 处理它的方式有点棘手(不要用脏话)。

很好的回答“ Spudley! 谢谢你的回复!”！

小开

对 IE 转换使用完整链接

此工具使用微软专有的 Visual Filters 技术将 CSS3转换属性(几乎所有现代浏览器都使用)转换为等效的 CSS。

小开

以 IE11为例(浏览器类型 = Trident 版本 = 7.0) :

image.style.transform = "rotate(270deg)";

提交答案