首頁 > web前端 > css教學 > 主體

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

Mary-Kate Olsen
發布: 2024-11-03 18:12:03
原創
915 人瀏覽過

How to Rotate Elements in IE9 using CSS3 Transform?

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板