如何在不同瀏覽器中使用 CSS 垂直旋轉文字？-css教學-PHP中文網

如何在不同瀏覽器中使用 CSS 垂直旋轉文字？

Patricia Arquette

發布： 2024-12-18 09:55:10

原創

910 人瀏覽過

How to Rotate Text Vertically Using CSS Across Different Browsers?

使用 CSS 垂直旋轉文字

實作跨瀏覽器垂直文字旋轉需要特定於瀏覽器的解決方案。對於支援CSS3變換的瀏覽器，可以使用rotate()。

CSS3變換：

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

登入後複製

此程式碼將文字逆時針旋轉90度並錨定旋轉到文字的中心。

過濾IE：

對於IE 5.5 及更高版本，可以使用過濾器屬性：

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

登入後複製

rotation=3 值將文字逆時針旋轉270 度。

moz 轉換Firefox：

對於Firefox 3.5 及更高版本，使用-moz-transform：

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

登入後複製

對於Safari 和Webkit 瀏覽器，-webkit-transform 是使用：

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

登入後複製

瀏覽器支援：

這些解決方案為IE6、Firefox 2、Chrome、Safari 和Opera 中的垂直文字旋轉提供跨瀏覽器支援。

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