CSS3 变换:旋转；在 IE9 中 [英] CSS3 transform: rotate; in IE9

问题描述

在我所做的设计中，我有一个元素需要垂直.我已经得到了可以在除 IE9 之外的所有浏览器中使用的 css.我为 IE7 & 使用了过滤器.IE8:

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);

然而，这似乎使我的元素在 IE9 中变得透明，而 CSS3 的转换"属性似乎没有做任何事情！

This however seems to render my element transparent in IE9 and the CSS3 'tranform' porperty doesn't seem to do anything!

有谁知道 IE9 中的旋转元素?

Does anyone know anyway of rotating elements in IE9?

非常感谢您的帮助！

W.

推荐答案

标准的 CSS3 旋转应该可以在 IE9 中工作，但我相信你需要给它一个供应商前缀，像这样:

Standard CSS3 rotate should work in IE9, but I believe you need to give it a vendor prefix, like so:

  -ms-transform: rotate(10deg);

它可能无法在 beta 版本中运行；如果没有，请尝试下载当前的预览版(预览版 7)，这是 beta 的更高版本.我没有要测试的 beta 版本，所以我无法确认它是否在那个版本中.最终发布版本肯定会支持它.

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.

我还可以确认 IE 特定的 filter 属性已在 IE9 中被删除.

I can also confirm that the IE-specific filter property has been dropped in IE9.

人们要求提供一些进一步的文件.正如他们所说，这是非常有限的，但我确实找到了这个页面: http://css3please.com/ 这是可用于在所有浏览器中测试各种 CSS3 功能.

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.

但在 IE9 预览版中测试此页面上的旋转功能导致它相当严重地崩溃.

But testing the rotate feature on this page in IE9 preview caused it to crash fairly spectacularly.

但是，我在自己的测试页面中使用 IE9 中的 -ms-transform:rotate() 进行了一些独立测试，并且工作正常.所以我的结论是该功能已实现，但存在一些错误，可能与动态设置有关.

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.

另一个有用的参考点是 www.canIuse.com ——参见 http://caniuse.com/#search=rotation

Another useful reference point for which features are implemented in which browsers is www.canIuse.com -- see http://caniuse.com/#search=rotation

恢复这个旧答案是因为我最近发现了一个名为 CSS Sandpaper 与问题相关，可能会使事情变得更容易.

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.

该 hack 实现了对旧版本 IE 的标准 CSS transform 的支持.所以现在您可以将以下内容添加到您的 CSS 中:

The hack implements support for the standard CSS transform for for old versions of IE. So now you can add the following to your CSS:

-sand-transform: rotate(10deg);

...让它在 IE 6/7/8 中工作，而无需使用 filter 语法.(当然它仍然在后台使用过滤器语法，但这使得它更容易管理，因为它使用与其他浏览器类似的语法)

...and have it work in IE 6/7/8, without having to use the filter syntax. (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)

这篇关于CSS3 变换:旋转；在 IE9 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！