IE 中的 CSS 旋转属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4617220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS rotate property in IE
提问by user160820
I want to rotate the DIV to a certain degree. In FF it functions but in IE I am facing a problem.
我想将 DIV 旋转到一定程度。在 FF 中它可以运行，但在 IE 中我遇到了问题。
For example in the following style I can set rotation=1 to 4
例如在以下样式中，我可以将 rotation=1 设置为 4
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
This means that the DIV will be rotated to 90 or 180 or 270 or 360 degree. But if I need to rotate the DIV only 20 degrees, then it doesn't work anymore.
这意味着 DIV 将旋转到 90 或 180 或 270 或 360 度。但是如果我只需要将 DIV 旋转 20 度，那么它就不再起作用了。
How may I solve this problem in IE?
我如何在 IE 中解决这个问题？
回答by Spudley
To rotate by 45 degrees in IE, you need the following code in your stylesheet:
要在 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 */
You'll note from the above that IE8 has different syntax to IE6/7. You need to supply both lines of code if you want to support all versions of IE.
您会从上面注意到 IE8 与 IE6/7 的语法不同。如果您想支持所有版本的 IE，您需要提供这两行代码。
The horrible numbers there are in Radians; you'll need to work out the figures for yourself if you want to use an angle other than 45 degrees (there are tutorialson the internet if you look for them).
以弧度表示的可怕数字；如果您想使用 45 度以外的角度，则需要自己计算出这些数字（如果您在网上寻找教程，则需要找到它们）。
Also note that the IE6/7 syntax causes problems for other browsers due to the unescaped colon symbol in the filter string, meaning that it is invalid CSS. In my tests, this causes Firefox to ignore all CSS code after the filter. This is something you need to be aware of as it can cause hours of confusion if you get caught out by it. I solved this by having the IE-specific stuff in a separate stylesheet which other browsers didn't load.
另请注意，由于过滤器字符串中未转义的冒号符号，IE6/7 语法会导致其他浏览器出现问题，这意味着它是无效的 CSS。在我的测试中，这会导致 Firefox 忽略过滤器之后的所有 CSS 代码。这是您需要注意的事情，因为如果您被它发现，可能会导致数小时的混乱。我通过在其他浏览器未加载的单独样式表中包含特定于 IE 的内容来解决此问题。
All other current browsers (including IE9 and IE10?—?yay!) support the CSS3 transformstyle (albeit often with vendor prefixes), so you can use the following code to achieve the same effect in all other browsers:
当前所有其他浏览器（包括 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) */
Hope that helps.
希望有帮助。
Edit
编辑
Since this answer is still getting up-votes, I feel I should update it with information about a JavaScript library called CSS Sandpaperthat allows you to use (near) standard CSS code for rotations even in older IE versions.
由于这个答案仍然得到了投票，我觉得我应该用一个名为CSS Sandpaper的 JavaScript 库的信息来更新它，即使在旧的 IE 版本中，它也允许您使用（接近）标准 CSS 代码进行旋转。
Once you've added CSS Sandpaper to your site, you should then be able to write the following CSS code for IE6–8:
将 CSS Sandpaper 添加到站点后，您应该能够为 IE6–8 编写以下 CSS 代码：
-sand-transform: rotate(40deg);
Much easier than the traditional filterstyle you'd normally need to use in IE.
比filter您通常需要在 IE 中使用的传统样式容易得多。
Edit
编辑
Also note an additional quirk specifically with IE9 (and only IE9), which supports both the standard transformand the old style IE -ms-filter. If you have both of them specified, this can result in IE9 getting completely confused and rendering just a solid black box where the element would have been. The best solution to this is to avoid the filterstyle by using the Sandpaper polyfill mentioned above.
还要注意一个额外的怪癖，特别是 IE9（并且只有 IE9），它支持标准transform和旧样式 IE -ms-filter。如果您同时指定了它们，这可能会导致 IE9 变得完全混乱，并在元素本来所在的位置呈现一个纯黑框。对此的最佳解决方案是filter使用上面提到的 Sandpaper polyfill来避免这种样式。
回答by zzzzBov
You'll need to do a matrix transform as follows:
您需要按如下方式进行矩阵变换：
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'
)";
Where COS_THETA and SIN_THETA are the cosine and sine values of the angle (i.e. 0.70710678for 45°).
其中 COS_THETA 和 SIN_THETA 是角度的余弦和正弦值（即0.7071067845°）。
回答by nmsdvid
There exists an on-line tool called IETransformsTranslator. With this tool you can make matrix filter transforms what works on IE6,IE7 & IE8. Just paste you CSS3 transform functions (e.g. rotate(15deg) ) and it will do the rest. http://www.useragentman.com/IETransformsTranslator/
存在一个名为 IETransformsTranslator 的在线工具。使用此工具，您可以使矩阵过滤器转换适用于 IE6、IE7 和 IE8 的内容。只需粘贴 CSS3 转换函数（例如 rotate(15deg) ），剩下的就交给它了。 http://www.useragentman.com/IETransformsTranslator/
回答by Steve Burrows
Scroll down to '.box_rotate' for the Microsoft IE9+ prefix. Similar discussion here: Rotating a Div Element in jQuery
向下滚动到 Microsoft IE9+ 前缀的“.box_rotate”。类似的讨论在这里：Rotating a Div Element in jQuery
回答by Pedro Ferreira
Just a hint... think twice before using "transform: rotate()", or even "-ms-transform :rotate()" (IE9) with mobiles!
只是一个提示......在使用“transform：rotate()”，甚至“-ms-transform :rotate()”（IE9）与手机之前三思而后行！
I've been knocking hard to the wall for days. I have a 'kinetic' system going on, that slides images and, on top of it, a command area. I did "transform" on an arrow button so it simulates pointing up and down... I've reviewd the 1.000 plus code lines for ages!!! ;-)
这几天我一直在努力敲墙。我有一个“动态”系统，它可以滑动图像，在它上面还有一个命令区。我在箭头按钮上进行了“转换”，因此它模拟了向上和向下指向……我已经查看了 1.000 多行代码行多年！！！;-)
All ok, once I removed transform:rotate from the CSS. It's a bit (not to use bad words) tricky the way IE handles it, comparing to other borwsers.
一切都好，一旦我从 CSS 中删除了 transform:rotate。与其他浏览器相比，IE 处理它的方式有点棘手（不要使用坏词）。
Great answer @Spudley! Thanks for writing it!
很好的答案@Spudley！谢谢你写它！
回答by Prashant Tapase
Usefull Linkfor IE transform
IE 转换的有用链接
This tool converts CSS3 Transform properties (which almost all modern browsers use) to the equivalent CSS using Microsoft's proprietary Visual Filters technology.
该工具使用 Microsoft 专有的 Visual Filters 技术将 CSS3 Transform 属性（几乎所有现代浏览器都使用）转换为等效的 CSS。
回答by C_J
For IE11 example (browser type=Trident version=7.0):
对于 IE11 示例（浏览器类型=Trident 版本=7.0）：
image.style.transform = "rotate(270deg)";
