CSS を使用してテキストを回転させる

この記事では、CSS を使用して HTML テキストを回転させます。 中国語、日本語、韓国語などの多くの言語では、回転されたテキストが頻繁に使用されます。

また、開発者は Web ページをデザインする際に、ユーザー インターフェイスをより魅力的にするためにテキストをある程度回転させる必要がある場合があります。 ここでは、2つの異なる方法を使用してテキストを回転させました。

CSS transform プロパティを使用してテキストを回転する

以下の例では、div 要素を作成し、識別のために element-text クラス名を付けています。 div 要素内で、<span> 要素を作成し、その中にテキストを追加しました。

コード例:

<div class="example-text">
    <span>Rotated texts.</span>
</div>

<div> 要素のすべてのテキストを回転させるために、CSS でクラス名を使用して div にアクセスしました。

次に、transform: rotate(-90deg) CSS プロパティを div 要素に適用して、コンテンツ全体を回転させました。 ただし、-webkit-transform: rotate(-90deg); を使用しました。 Chrome ブラウザでテキストを回転するには -moz-transform: rotate(-90deg); Firefox ブラウザーでテキストを回転します。 -o-transform: rotate(-90deg); と同じです。 オペラ用。

また、追加の CSS を適用して、div 要素の位置を上部に設定しました。 ここで、Position: absolute は、div 要素の位置が、ドキュメント本体である親に対して相対的に変化することを意味します。

.example-text {
    -webkit-transform: rotate(-80deg);
    -moz-transform: rotate(-80deg);
    -o-transform: rotate(-80deg);
    position: absolute;
    top: 40px;
}

以下の出力では、テキストが反時計回りに 90 度回転していることがわかります。

rotate() メソッドの引数として正の値を渡すと、コンテンツまたはテキストが時計回りに回転し、ユーザーは以下の例で学習できます。

.example-text {
    -webkit-transform: rotate(80deg);
    -moz-transform: rotate(80deg);
    -o-transform: rotate(80deg);
    position: absolute;
    top: 40px;
}

<div class="example-text">
    <span>Rotated texts.</span>
</div>

CSS writing-mode プロパティを使用してテキストを回転させる

writing-mode CSS プロパティは、テキストの向きを変更するのに役立ちます。 これを使用して、テキストを 90 度または -90 度回転できます。

verticle-rl を writing-mode プロパティの値として使用して、ユーザーがテキストを右から左、上から下に読めるようにテキストを回転させることができます。

以下の例では、writing-mode: vertical-rl CSS プロパティを使用して回転させたテキストを含む <p> HTML タグを作成しました。

コード例:

<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>

.text{
    writing-mode: vertical-rl;
    height: 200px;
}

writing-mode プロパティの値として verticle-lr を使用すると、テキストが左から右、上から下に読めるようにテキストが回転します。

.text{
    writing-mode: vertical-lr;
    height: 200px;
}

<p class="text">These text rotated by writing-mode: vertical-rl; CSS property. Read it from top to bottom and left to right.</p>

上記の出力により、ユーザーはテキストを左から右、上から下に読むことができます。

テキストを回転させるさまざまな方法を学びました。 最初の方法では、プログラマはテキストを任意の角度で回転できます。

2 番目の方法を使用すると、プログラマはテキストを 90 度回転させて、左から右または右から左に読みやすくすることができます。 したがって、最初の方法を使用することをお勧めします。