ブラウザ間の互換性を維持してテキストを垂直方向に回転するにはどうすればよいですか?

クロスブラウザサポートによるテキストの垂直方向の回転

単一の単語を垂直方向に表示する必要がありますか?これは 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></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 中国語 Web サイトの他の関連記事を参照してください。