IE中的CSS旋转属性

Posted 2023-03-06

【中文标题】IE中的CSS旋转属性

【英文标题】：CSS rotate property in IE

【发布时间】：2011-06-04 18:30:30

【问题描述】：

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

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

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

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

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

【问题讨论】：

虽然可以在 IE8（以及 IE6 和 IE7）中使用过滤器矩阵进行转换，但它会围绕一个与常规 CSS 旋转不同的点进行旋转，并且没有简单的方法可以解决此问题。这意味着您的旋转元素在 IE8 中与其他浏览器的位置始终不同 - 除非您在 JS 中进行旋转，例如通过图书馆。 More detail, examples and a suggested JS library at this question.

【参考方案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 度以外的角度，你需要自己计算出数字（如果你在网上找 tutorials 的话）。

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

当前所有其他浏览器（包括 IE9 和 IE10 — yay！）都支持 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) */

希望对您有所帮助。

编辑

由于这个答案仍在获得投票，我觉得我应该使用一个名为 CSS Sandpaper 的 javascript 库的信息来更新它，它允许您使用（接近）标准 CSS 代码进行旋转，即使在旧 IE 版本中也是如此。

将 CSS Sandpaper 添加到您的网站后，您应该能够为 IE6–8 编写以下 CSS 代码：

-sand-transform: rotate(40deg);

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

编辑

另请注意 IE9（且仅 IE9）的一个额外怪癖，它支持标准 transform 和旧样式 IE -ms-filter。如果您同时指定了它们，这可能会导致 IE9 完全混淆并在元素所在的位置呈现一个纯黑框。最好的解决方案是使用上面提到的 Sandpaper polyfill 来避免 filter 样式。

【讨论】：

许多使用 IE 矩阵变换过滤器的东西在 IE10 中会失败，并且在 IE10 模拟旧浏览器中似乎会失败，因为IE10 by default has 'legacy filters' disabled。是的，IE 更新仍然破坏了一些东西，即使现在他们正试图遵循标准......所以请确保 IE10+ 使用标准的transform CSS，而不是 MS 过滤器。如果您使用 IE10 浏览器模式来测试旧版本的 IE，请告诉它启用旧版过滤器 - 但不要忘记您的 IE10+ 用户将拥有旧版过滤器禁用！啊啊啊啊啊啊啊啊

@user568458 - 这里的真正信息是：不要使用 IE10 的兼容模式来测试您的站点是否兼容 IE9/8/7；这不是一个足够好的测试；与旧 IE 版本的真实副本相比，兼容模式有很多问题；唯一有效的测试是在您想要支持的浏览器的真实副本中。另请注意，在 IE11 中，它们会明确阻止您这样做；兼容性模式将无法在开发工具中以相同的方式更改；唯一可用的模式是“边缘”和网站明确设置的任何模式（如果有的话）。

+1 是很好的解决方案，但我应该告诉你，可怕的数字不是弧度 - 它们是角度的正弦/余弦（在这种情况下为 45 度或 $\pi/4$ 弧度） ，与所用角度的度量无关...这里的数字是 $\pm\sqrt2$

【参考方案2】：

您需要按如下方式进行矩阵变换：

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_THETA 是角度的余弦和正弦值（即，0.70710678 表示 45°）。

【讨论】：

我看到的 IE 矩阵翻译上的所有其他线程都说它好像与弦理论相提并论，甚至没有试图解释它 - 结果你只需要点击 @987654323 @ 和 cos 在计算器上！谢谢！

IE6 要求 ms-filter 声明仅在一行中，较新版本不会有这个问题！

除了@MisterCrimson 评论之外，我还必须将所有内容放在 sass 文件中的一行中。

【参考方案3】：

有一个名为 IETransformsTranslator 的在线工具。使用此工具，您可以使矩阵过滤器转换适用于 IE6、IE7 和 IE8 的内容。只需粘贴您的 CSS3 变换函数（例如 rotate(15deg) ），剩下的就交给它了。 http://www.useragentman.com/IETransformsTranslator/

【讨论】：

甜蜜！很棒的链接。从高中起就没有用过计算器上的 sin / cos 按钮，现在特别不想开始。

【参考方案4】：

http://css3please.com/

向下滚动到 Microsoft IE9+ 前缀的“.box_rotate”。 类似讨论：Rotating a Div Element in jQuery

【参考方案5】：

只是一个提示...在使用“transform: rotate()”，甚至是“-ms-transform :rotate()” (IE9) 之前三思而后行！

这几天我一直在用力敲墙。我有一个“动力学”系统，它可以滑动图像，在它上面还有一个命令区域。我在箭头按钮上进行了“转换”，因此它模拟了向上和向下的指向……我已经审查了 1.000 多行代码！ ;-)

一切正常，一旦我从 CSS 中删除了 transform:rotate。 与其他浏览器相比，IE 处理它的方式有点（不要使用坏词）。

很好的答案@Spudley！感谢您的写作！

【参考方案6】：

Usefull Link 用于 IE 转换

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

【参考方案7】：

对于 IE11 示例（浏览器类型=Trident 版本=7.0）：

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