IE中的CSS旋转属性

73

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

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

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

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

如何在IE中解决此问题？

css  internet-explorer  rotation 
— 用户名
source
尽管可以使用过滤器矩阵在IE8（以及IE6和IE7）中进行转换，但它会绕不同的点旋转到常规的CSS旋转，没有简单的方法可以解决此问题。这意味着您旋转后的元素在IE8中将始终具有与其他浏览器不同的位置-除非您通过例如库在JS中进行旋转。有关此问题的更多详细信息，示例和建议的JS库。
— user56reinstatemonica8 2013年

Answers:

145

要在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度以外的角度，则需要自己计算出数字（如果要查找，请参见Internet上的教程）。

另请注意，由于过滤器字符串中的冒号符号未转义，因此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) */

希望能有所帮助。

编辑

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

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

-sand-transform: rotate(40deg);

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

编辑

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

— 斯普德利
source
3
使用IE矩阵转换过滤器的许多事情在IE10中将失败，并且在IE10模拟旧浏览器中似乎会失败，因为IE10默认情况下禁用了“旧式过滤器”。是的，即使现在他们正在尝试遵循标准，IE更新仍然会破坏事情。因此，请确保IE10 +使用标准transformCSS，而不是MS过滤器。如果您使用IE10浏览器模式测试IE的较早版本，请告诉它启用旧版过滤器-但不要忘记，您的IE10 +用户将禁用旧版过滤器！Arrrrrgggghhhhhhhh
— user56reinstatemonica8'7
2
@ user568458-真正的消息是：不要使用IE10的兼容性模式来测试您的站点的IE9 / 8/7兼容性；这个测试还不够好；与旧版IE版本的真实副本相比，兼容性模式在很多方面存在问题；唯一有效的测试是您要支持的浏览器的真实副本。另请注意，在IE11中，它们将明确阻止您执行此操作；兼容性模式将无法在开发工具中以相同的方式进行更改；唯一可用的模式是“边缘”，以及网站明确设置的任何模式（如果有）。
— Spudley13年
+1是一个好的解决方案，但我应该告诉您，可怕的数字不是以弧度为单位-它们是角度的正弦/余弦（在这种情况下为45度或$ \ pi / 4 $弧度），与测量的度数无关使用的角度...这里的数字是$ \ pm \ sqrt {2} $
— danimal
58

您需要执行如下矩阵转换：

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.7071067845°）。

— zzzzBov
source
2
我所见过的IE矩阵翻译中的所有其他线程都说过，好像在与字符串理论相提并论，甚至都没有试图解释它-事实证明，您只需要点击sin并cos在计算器上即可！谢谢！
— user56reinstatemonica8
2
IE6要求ms-filter声明只能在一行中，较新的版本不会有此问题！
— 先生绯红色
除了@MisterCrimson注释之外，我还必须将所有内容都放在sass文件中的一行中。
— 卡罗尔2015年
26

有一个名为IETransformsTranslator的在线工具。使用此工具，您可以对IE6，IE7和IE8进行有效的矩阵滤波器转换。只需粘贴您的CSS3变换函数（例如，rotate（15deg）），其余的事情就会完成。 http://www.useragentman.com/IETransformsTranslator/

— nmsdvid
source
3
甜！很棒的链接。从高中开始就没有使用计算器上的sin / cos按钮，也不想现在就开始。
— squarecandy13年
2

只是一个提示……在手机上使用“ transform：rotate（）”甚至“ -ms-transform：rotate（）”（IE9）之前，请三思！

几天来，我一直在努力地敲墙。我正在运行一个“动态”系统，该系统可以滑动图像，并在其顶部还包含一个命令区域。我在箭头按钮上进行了“转换”，因此它可以模拟向上和向下的指向...我已经研究了1000多年的代码行！;-)

好的，一旦我从CSS移除了transform：rotate。与其他浏览器相比，IE处理它的方式有些麻烦（不要用脏话）。

好答案@Spudley！感谢您编写！

— 佩德罗·费雷拉
source
2

IE转换的有用链接

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

— Prashant Tapase
source
0

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

image.style.transform = "rotate(270deg)";
— C_J
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.