異なるブラウザ間で CSS を使用してテキストを垂直方向に回転する方法

CSS を使用したテキストの垂直方向の回転

ブラウザー間でテキストの垂直方向の回転を実現するには、ブラウザー固有のソリューションが必要です。 CSS3 変換をサポートするブラウザの場合は、rotate() を使用できます。

CSS3 Transform:

.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-transform 用Firefox:

Firefox 3.5 以降の場合、-moz-transform が使用されます:

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

-webkit-transform (Safari/Webkit の場合):

Safari および Webkit ブラウザの場合、-webkit-transform は使用:

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

ブラウザ サポート:

これらのソリューションは、IE6、Firefox 2、Chrome、Safari、Opera での縦方向のテキスト回転のクロスブラウザ サポートを提供します。

以上が異なるブラウザ間で CSS を使用してテキストを垂直方向に回転する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。