CSS CSS3 变换：旋转；在 IE9
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4865167/
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
CSS3 transform: rotate; in IE9
提问by wilsonpage
I have an element that needs to be vertical in a design I have done. I have got the css for this to work in all browsers except IE9. I used the filter for IE7 & IE8:
在我完成的设计中，我有一个元素需要垂直。我已经让 css 可以在除 IE9 之外的所有浏览器中工作。我使用了 IE7 和 IE8 的过滤器：
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
This however seems to render my element transparent in IE9 and the CSS3 'tranform' porperty doesn't seem to do anything!
然而，这似乎使我的元素在 IE9 中变得透明，而 CSS3 'transform' 属性似乎没有做任何事情！
Does anyone know anyway of rotating elements in IE9?
有谁知道 IE9 中的旋转元素？
Really appreciate the help!
真的很感谢帮助！
W.
W.
回答by Spudley
Standard CSS3 rotate should work in IE9, but I believe you need to give it a vendor prefix, like so:
标准 CSS3 旋转应该在 IE9 中工作，但我相信您需要给它一个供应商前缀，如下所示：
-ms-transform: rotate(10deg);
It is possible that it may not work in the beta version; if not, try downloading the current preview version (preview 7), which is a later revision that the beta. I don't have the beta version to test against, so I can't confirm whether it was in that version or not. The final release version is definitely slated to support it.
它可能无法在测试版中运行；如果没有，请尝试下载当前的预览版（预览版 7），这是 Beta 版的更新版本。我没有要测试的 beta 版本，所以我无法确认它是否在那个版本中。最终发布版本肯定会支持它。
I can also confirm that the IE-specific filterproperty has been dropped in IE9.
我还可以确认 IE 特定的filter属性已在 IE9 中删除。
[Edit]
People have asked for some further documentation. As they say, this is quite limited, but I did find this page: http://css3please.com/which is useful for testing various CSS3 features in all browsers.
[编辑]
人们要求提供一些进一步的文件。正如他们所说，这是非常有限的，但我确实找到了这个页面：http: //css3please.com/，它对于在所有浏览器中测试各种 CSS3 功能很有用。
But testing the rotate feature on this page in IE9 preview caused it to crash fairly spectacularly.
但是在 IE9 预览版中测试此页面上的旋转功能导致它崩溃得相当厉害。
However I have done some independant tests using -ms-transform:rotate()in IE9 in my own test pages, and it is working fine. So my conclusion is that the feature is implemented, but has got some bugs, possibly related to setting it dynamically.
但是，我-ms-transform:rotate()在自己的测试页面中使用IE9进行了一些独立测试，并且运行良好。所以我的结论是该功能已实现，但有一些错误，可能与动态设置有关。
Another useful reference point for which features are implemented in which browsers is www.canIuse.com -- see http://caniuse.com/#search=rotation
在哪些浏览器中实现哪些功能的另一个有用参考点是 www.canIuse.com -- 请参阅http://caniuse.com/#search=rotation
[EDIT]
Reviving this old answer because I recently found out about a hack called CSS Sandpaperwhich is relevant to the question and may make things easier.
[编辑]
重温这个旧答案，因为我最近发现了一个叫做CSS Sandpaper的黑客，它与这个问题相关，可能会让事情变得更容易。
The hack implements support for the standard CSS transformfor for old versions of IE. So now you can add the following to your CSS:
hack 实现transform了对旧版本 IE的标准 CSS 的支持。所以现在您可以将以下内容添加到您的 CSS 中：
-sand-transform: rotate(10deg);
...and have it work in IE 6/7/8, without having to use the filtersyntax. (of course it still uses the filter syntax behind the scenes, but this makes it a lot easier to manage because it's using similar syntax to other browsers)
...并让它在 IE 6/7/8 中工作，而无需使用filter语法。（当然它在幕后仍然使用过滤器语法，但这使得管理起来容易得多，因为它使用与其他浏览器相似的语法）
回答by Alpesh Panchal
Try this
尝试这个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 50px;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
}
.rotate {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-sand-transform: rotate(10deg);
display: block;
position: fixed;
}
</style>
</head>
<body>
<div class="rotate">Alpesh</div>
</body>
</html>
回答by Katherine Mokhova
I also had problems with transformations in IE9, I used -ms-transform: rotate(10deg)and it didn't work. Tried everything I could, but the problem was in browser mode, to make transformations work, you need to set compatibility mode to "Standard IE9".
我在 IE9 中的转换也有问题，我使用过-ms-transform: rotate(10deg)，但没有奏效。尽我所能，但问题出在浏览器模式下，要使转换工作，您需要将兼容模式设置为“标准 IE9”。
回答by Steve
I know this is old, but I was having this same issue, found this post, and while it didn't explain exactly what was wrong, it helped me to the right answer - so hopefully my answer helps someone else who might be having a similar problem to mine.
我知道这是旧的，但我遇到了同样的问题，找到了这篇文章，虽然它没有解释到底出了什么问题，但它帮助我找到了正确的答案 - 所以希望我的回答可以帮助其他可能有问题的人和我的问题类似。
I had an element I wanted rotated vertical, so naturally I added the filter: for IE8 and then the -ms-transform property for IE9. What I found is that having the -ms-transform property AND the filter applied to the same element causes IE9 to render the element very poorly. My solution:
我有一个想要垂直旋转的元素，所以很自然地我添加了过滤器：对于 IE8，然后是 -ms-transform 属性对于 IE9。我发现将 -ms-transform 属性和过滤器应用于同一元素会导致 IE9 对元素的渲染效果非常差。我的解决方案：
If you are using the transform-origin property, add one for MS too (-ms-transform-origin: left bottom;). If you don't see your element, it could be that it's rotating on it's middle axis and thus leaving the page somehow - so double check that.
Move the filter: property for IE7&8 to a separate style sheet and use an IE conditional to insert that style sheet for browsers less than IE9. This way it doesn't affect the IE9 styles and all should work fine.
Make sure to use the correct DOCTYPE tag as well; if you have it wrong IE9 will not work properly.
如果您使用的是 transform-origin 属性，也为 MS 添加一个 (-ms-transform-origin: left bottom;)。如果您没有看到您的元素，则可能是它在它的中轴上旋转，从而以某种方式离开页面 - 所以仔细检查一下。
将 IE7&8 的 filter: 属性移动到单独的样式表，并使用 IE 条件为低于 IE9 的浏览器插入该样式表。这样它就不会影响 IE9 样式，并且一切正常。
确保也使用正确的 DOCTYPE 标签；如果你弄错了，IE9 将无法正常工作。
