CSS を使用してブラウザ間でテキストの縦方向の回転を実現するにはどうすればよいですか?

CSS を使用したブラウザ間での縦方向のテキスト回転

背景

多くの最新の Web サイトには動的が組み込まれています回転されたテキストを含むコンテンツ。ただし、ブラウザ間で一貫した縦書きテキストを実現するには課題があります。

解決策

単語を 90 度回転するには、「transform」プロパティを利用します。

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

ブラウザ互換性

このアプローチは主要なブラウザをサポートします:

• Chrome (任意のバージョン)
• Firefox (≥2)
• Safari (≥ 3.1)
• オペラ(≥5)
• IE (≥9)

注

9 より前のバージョンの IE では、フィルター プロパティを適用する必要があります:

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

Firefox (≥3.5) および Webkit (≥3.1) の場合は、次の点を考慮してください。それぞれ「-moz-transform」と「-webkit-transform」です。

結論

提供された CSS テクニックにより、ブラウザ間でのテキストの縦方向の回転が可能になり、効率的なテキストの回転が可能になります。一貫したコンテンツのプレゼンテーション。

以上がCSS を使用してブラウザ間でテキストの縦方向の回転を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。