IE中的CSS旋转属性

Question

我想将 DIV 旋转到指定的角度。在 FF 中它可以工作，但在 IE 中我遇到了问题。

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

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

这意味着 DIV 将被旋转到90度或180度或270度或360度。但如果我需要将DIV仅旋转20度，则不再起作用。

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

- user160820

---

虽然在IE8（以及IE6和IE7）中使用filter matrix可以进行变换，但它围绕不同的点旋转，与常规CSS旋转不同，并且没有简单的方法来解决这个问题。这意味着您旋转的元素在IE8中的位置始终与其他浏览器不同 - 除非您通过JS（例如通过库）进行旋转。更多详细信息、示例和建议的JS库，请参见此问题。 - user56reinstatemonica8

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）都支持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库的信息，它可以让你即使在旧版本的IE中也能使用（几乎）标准的CSS代码进行旋转。

一旦你将CSS Sandpaper添加到你的网站中，你就可以为IE6-8编写以下CSS代码：

-sand-transform: rotate(40deg);

比起传统的在IE中需要使用的filter方式要简单得多。

编辑

还请注意，特别是在IE9（仅限于IE9），它支持标准的transform和旧版IE的-ms-filter。如果你都指定了它们，这可能导致IE9完全混乱，并在元素应该出现的位置渲染一个纯黑色的框。解决这个问题的最佳方法是避免使用filter样式，而是使用上面提到的Sandpaper polyfill。

- Spudley

---

使用IE矩阵变换滤镜的许多元素将在IE10中失败，并且在模拟旧版浏览器的IE10中也会出现失败的情况，因为默认情况下，IE10已禁用“传统滤镜”。是的，即使在现在它们正在尝试遵循标准，IE更新仍然会破坏一些东西...因此，请确保IE10+使用标准的transform CSS，而不是MS滤镜。如果您使用IE10浏览器模式来测试旧版IE，请告诉它启用传统过滤器-但不要忘记，您的IE10+用户将禁用传统过滤器！啊啊啊啊啊啊啊啊 - user56reinstatemonica8

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

+1 对于好的解决方案，但我应该告诉你可怕的数字不是以弧度为单位的 - 它们是角度的正弦/余弦（在这种情况下是45度或$\pi/4$弧度），它们与使用的角度度量无关... 这里的数字是 $\pm\sqrt{2}$。 - danimal

Answer 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分别代表角度的余弦值和正弦值（例如45度对应的值为0.70710678）。

- zzzzBov

---

我看到的IE矩阵翻译帖子中，每个其他人都在讲述它与弦理论相当，甚至没有尝试解释它 - 其实你只需要在计算器上输入sin和cos！谢谢！ - user56reinstatemonica8

IE6需要将ms-filter声明放在一行中，而更新的版本则不会有这个问题！ - Mister Crimson

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

Answer 3

存在一种名为IETransformsTranslator的在线工具。使用此工具，您可以创建适用于IE6、IE7和IE8的矩阵滤镜转换。只需将CSS3变换函数（例如rotate（15度））粘贴进去，它就会完成剩下的工作。

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

- nmsdvid

---

好的！链接很不错。自高中以来就没有使用过计算器上的正弦/余弦按钮，现在也不想开始使用。 - squarecandy

Answer 4

http://css3please.com/

向下滚动到'.box_rotate'，以获取Microsoft IE9+前缀。类似的讨论在这里：Rotating a Div Element in jQuery

- Steve Burrows

Answer 5

有用的链接，适用于IE变换

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

- Prashant Tapase

Answer 6

小提示：在移动设备上使用“transform: rotate()”甚至“-ms-transform: rotate()”（IE9）之前，请三思而后行！

我已经努力攻克这个问题好几天了。我有一个“动力学”系统，它可以滑动图像，并在其上方放置一个命令区域。我对箭头按钮进行了“变换”，以便它模拟向上和向下指向......我检查了1000多行代码很长时间！！！;-)

一旦我从CSS中删除了transform:rotate，一切都好了。与其他浏览器相比，IE处理它的方式有些棘手（不用说坏话）。

非常好的答案@Spudley！感谢您的撰写！

- Pedro Ferreira

Answer 7

例如IE11（浏览器类型=Trident版本=7.0）：

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

- C_J