如何用CSS實現跨瀏覽器垂直文字旋轉？

使用CSS 的跨瀏覽器垂直文字旋轉

背景

背景

許多現代網站都包含動態內容，包括旋轉文字。然而，跨瀏覽器實現一致的垂直文字是一個挑戰。

解

.rotate {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;  
}

要將單字旋轉 90 度，請利用「transform」屬性：

瀏覽器相容性

• 此方法支援主要瀏覽器：
• Chrome（任何版本）
• Firefox (>Firefox (>Firefox (>Firefox ≥2)
• Safari (≥ 3.1)

歌劇(≥5)

IE (≥9)

注意

.rotate {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

9 之前的IE版本需要套用過濾器屬性：

對於Firefox (≥ 3.5）和Webkit（≥3.1），考慮'-moz-transform'和'-webkit-transform'，

結論提供的CSS 技術允許跨瀏覽器垂直文字旋轉，從而實現高效且一致的內容呈現。

以上是如何用CSS實現跨瀏覽器垂直文字旋轉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！