IE中的CSS旋转属性
我想旋转一定的DIV。 在FF功能，但在IE我面临一个问题。
例如，在下面的风格，我可以设置旋转= 1至4
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 这意味着DIV将旋转到90或180或270或360度。 但是，如果我需要旋转DIV只有20度，那么它不再工作。
我怎么可能在IE中解决这个问题？
在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 – 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变得完全混淆，并且渲染出一个黑色的方块。 最好的解决方案是通过使用上面提到的砂纸填充来避免filter风格。
你需要做一个矩阵变换如下：
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 ）。
有一个名为IETransformsTranslator的在线工具。 有了这个工具，你可以使矩阵滤波器变换在IE6，IE7和IE8上工作。 只需粘贴CSS3转换函数（例如旋转（15deg）），剩下的工作就完成了。 http://www.useragentman.com/IETransformsTranslator/
向下滚动到“.box_rotate”为Microsoft IE9 +前缀。 这里有类似的讨论： 在jQuery中旋转div元素
只是一个提示…使用“transform：rotate（）”，甚至“-ms-transform：rotate（）”（IE9）之前三思而后行！
我已经拼命敲墙了好几天了。 我有一个“动力学”系统，这个系统可以滑动图像，在其上面还有一个指挥区。 我做了一个箭头按钮“变形”，所以它模拟上下指向…我已经审查了千岁以上的代码行！ 😉
一切正常，一旦我删除转换：从CSS旋转。 IE浏览器处理它的方式有一些（不要用坏的话），比较其他borwsers。
很好的答案@Spudley！ 感谢您的写作！
有用的链接进行IE转换
这个工具将CSS3 Transform属性（几乎所有现代浏览器都使用）转换为使用微软专有的可视化过滤器技术的等效CSS。
对于IE11示例（浏览器类型= Trident版本= 7.0）：
image.style.transform = "rotate(270deg)";
