CSS | テキスト・文字を左右反転表示する

CSS,CSS テキストデザイン

テキスト・文字を左右反転表示する

文字やテキストを左右反転表示するCSSのサンプルコードです。

See the Pen CSS | Flip the text horizontally by yochans (@yochans) on CodePen.

テキスト・文字を左右反転させる

CSSでテキストを左右反転表示させるサンプルコードです。

<p class="text">Hello World</p>
.text {
	transform: scaleX(-1);
}

要素の反転表示には、要素を拡大・縮小させる場合に使うtransformのscaleの利用が便利です。

scaleはマイナス値を指定する事で、逆の方向に拡大処理を実装可能で、1がデフォルトのサイズであるのと同様に-1が逆方向でのデフォルトサイズとなります。

今回は左右反転ですのでscaleXに-1を指定しています。
これはscale(-1, 0)と同じです。