CSS3 变换：旋转；在IE9中
我有一个元素需要在我所做的设计中保持垂直。我已经获得了可以在除 IE9 之外的所有浏览器中使用的 css。我使用了 IE7 和 IE7 的过滤器IE8：
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
然而，这似乎使我的元素在 IE9 中透明，而 CSS3 'transform' 属性似乎没有做任何事情！
有谁知道 IE9 中的旋转元素吗？
非常感谢您的帮助！
W.
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:
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!
Does anyone know anyway of rotating elements in IE9?
Really appreciate the help!
W.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
标准 CSS3 旋转应该在 IE9 中工作，但我相信你需要给它一个供应商前缀，如下所示：
It is possible that it might not work in the beta version;如果没有，请尝试下载当前的预览版本（预览 7），这是 beta 的更高版本。我没有测试版本来测试，所以我无法确认它是否在该版本中。最终发布版本肯定会支持它。
我还可以确认 IE 特定的
filter属性已在 IE9 中删除。[编辑]
人们要求提供一些进一步的文档。正如他们所说，这是相当有限的，但我确实找到了这个页面： http://css3please.com/ 这是对于在所有浏览器中测试各种 CSS3 功能很有用。
但在 IE9 预览版中测试此页面的旋转功能导致其崩溃相当严重。
不过，我在自己的测试页面中使用 IE9 中的
-ms-transform:rotate()做了一些独立测试，并且工作正常。所以我的结论是该功能已实现，但存在一些错误，可能与动态设置有关。关于在哪些浏览器中实现哪些功能的另一个有用的参考点是 www.canIuse.com - 请参阅 http://caniuse .com/#search=rotation
[编辑]
恢复这个旧答案是因为我最近发现了一个名为 CSS Sandpaper< /a> 这与问题相关，可能会让事情变得更容易。
该 hack 实现了对旧版本 IE 的标准 CSS
transform的支持。因此，现在您可以将以下内容添加到 CSS 中：...并使其在 IE 6/7/8 中工作，而无需使用
filter语法。 （当然它仍然在幕后使用过滤器语法，但这使它更容易管理，因为它使用与其他浏览器类似的语法）Standard CSS3 rotate should work in IE9, but I believe you need to give it a vendor prefix, like so:
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.
I can also confirm that the IE-specific
filterproperty has been dropped in 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.
But testing the rotate feature on this page in IE9 preview caused it to crash fairly spectacularly.
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.Another useful reference point for which features are implemented in which browsers is www.canIuse.com -- see http://caniuse.com/#search=rotation
[EDIT]
Reviving this old answer because I recently found out about a hack called CSS Sandpaper which is relevant to the question and may make things easier.
The hack implements support for the standard CSS
transformfor for old versions of IE. So now you can add the following to your CSS:...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)试试这个
Try this
我在 IE9 中也遇到了转换问题，我使用了 -ms-transform:rotate(10deg) ，但它不起作用。尽我所能，但问题出在浏览器模式下，要使转换工作，您需要将兼容模式设置为“标准 IE9”。
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".我知道这已经很旧了，但我也遇到了同样的问题，找到了这篇文章，虽然它没有准确解释出了什么问题，但它帮助我找到了正确的答案 - 所以希望我的答案可以帮助其他可能遇到问题的人与我类似的问题。
我有一个想要垂直旋转的元素，所以很自然地我添加了过滤器：对于 IE8，然后是 IE9 的 -ms-transform 属性。我发现，将 -ms-transform 属性和过滤器应用于同一元素会导致 IE9 渲染该元素的效果非常差。我的解决方案：
如果您使用的是transform-origin属性，请为MS也添加一个（-ms-transform-origin：左下；）。如果您没有看到您的元素，则可能是它在中轴上旋转，从而以某种方式离开页面 - 因此请仔细检查。
将 IE7 和 8 的 filter: 属性移至单独的样式表，并使用 IE 条件为 IE9 以下的浏览器插入该样式表。这样，它就不会影响 IE9 样式，并且一切都应该正常工作。
确保使用正确的 DOCTYPE 标签；如果您输入错误，IE9 将无法正常工作。
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:
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.
可以使用：
Can use: