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)と同じです。