CSS3旋轉替代？

Question

我正在使用CSS3規則「旋轉」來旋轉包含文本的div。你可以在這裏看到這個頁面：http://vitaminjdesign.com/v2/socialmedia.html。我正在尋找跨瀏覽器支持旋轉div;但是，這個CSS3規則不適用於IE。是否有一個jQuery選項或另一個JavaScript解決方案可以產生相同的結果，並具有跨瀏覽器兼容性？

Answer 1

使用Sandpaper，你可以使用這個CSS規則：

-sand-transform: rotate(90deg); 

，它會在每個瀏覽器的工作 - 即使在IE瀏覽器。

Answer 2

我會用Raphael和Cufon來做這類事情，但是當你旋轉的時候你必須用自己的文字包裝，因爲你必須用Raphael的print而不是Cufon的replace。這樣字體就是矢量，旋轉是以純幾何的方式處理的。

目前css-rotate的問題超出了跨瀏覽器的兼容性，但是 - 在支持它的瀏覽器中，結果通常看起來像垃圾。在我的Firefox 3.6中，您的網站看起來像是在不均勻基線上的別名混雜。我知道你問了一個具體的問題，我盡力回答，但我對你的建議是把js庫的開銷放在你想要在這裏完成的任務，並且只需要一個高質量的圖像。您已經在「懸掛標籤」背景圖片中投入了帶寬，因此向該圖片添加文本的成本很低，而全新js庫爲您正確處理文本旋轉問題的成本將非常高。不是最尖端的解決方案，我會授予你......但那就是我們今天的地方。

Answer 3

如果您希望css旋轉與IE的舊版本兼容，那麼可以使用它，但它只能應用一次，並且在計算最終的矩陣時會涉及許多計算。