問題描述

在我所做的設計中，我有一個元素需要垂直.我已經得到了可以在除 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 中的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！