如何垂直旋轉文字並與跨瀏覽器兼容？

跨瀏覽器支援垂直旋轉文字

需要垂直顯示單字？這可以透過 CSS 來實現，確保跨主流瀏覽器（如 IE6、Firefox 2 和 Chrome）的兼容性。

解決方案：

使用 CSS 將文字旋轉 90 度，請按照以下步驟操作：

1. 使用所需的 CSS定義一個類別轉換：

.rotate {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);

  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
}

2. 將類別應用於所需的文字：

<span>

對於較舊的瀏覽器：

在舊版瀏覽器中，您可以使用下列矩陣程式碼轉換：

.rot-neg-90 {
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
}

這會將 Firefox 3.5 和 Safari/WebKit 3.1 中的文字旋轉 -90 度。 IE 對矩陣的支援有限，但實作起來比較複雜。

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