如何使用 CSS3 Transform 旋轉 IE9 中的元素？

IE9 中的 CSS3 變換：旋轉

本文旨在解決在 IE9 中旋轉元素的問題。

問題

在設計中，我們需要一個垂直元素。雖然 CSS 在所有瀏覽器中都能正常運作，但 IE9 除外。我們在 IE7 和 IE8 中使用了 filter 屬性：

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

然而，這會導致元素在 IE9 中變為透明，CSS3 的「變換」屬性似乎沒有任何作用！

答案

標準的CSS3 旋轉應該可以在IE9 中使用，但我們認為需要添加供應商前綴，如下所示：

-ms-transform: rotate(10deg);

它可能無法在測試版中使用；如果不是，請嘗試下載當前預覽版（預覽7），這是比測試版更新的版本。我們沒有測試版的測試版本，因此無法確認它是否在該版本中。最終版本絕對會被計劃支持它。

我們也可以確認 IE9 中已經刪除了 IE 特定的 filter 屬性。

進一步的文檔

據說這是非常有限的，但我們確實找到了這個頁面：http://css3please.com/，它對於在所有瀏覽器中測試各種CSS3 功能很有用。

但在 IE9 預覽中測試此頁面上的旋轉功能會導致它崩潰得很慘烈。

然而，我們在自己的測試頁面中對 -ms-transform:rotate() 在 IE9 中進行了獨立測試，並且它工作得很好。因此，我們的結論是該功能已經實現，但有一些錯誤，可能與動態設定有關。

用於確定哪些功能在哪些瀏覽器中實現的另一個有用的參考點是www.canIuse.com -- 請參閱http://caniuse.com/#search=rotation

最近更新

重新給出這個舊答案，因為我們最近了解到了一種名為CSS Sandpaper 的破解方法，它與問題有關，可能會讓事情變得更簡單。

此破解方法為舊版的 IE 實作了對標準 CSS 變換的支援。因此，現在可以將以下內容加入你的 CSS 中：

-sand-transform: rotate(10deg);

...並且讓它在 IE 6/7/8 中工作，而無需使用 filter 語法。 （當然，它仍然在幕後使用 filter 語法，但這透過使用類似於其他瀏覽器語法的語法的處理，變​​得更加容易。）

以上是如何使用 CSS3 Transform 旋轉 IE9 中的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！