プログラミングで暮らしをハック
ITで暮らしを便利にするブログ
Web制作のノウハウ

CSSで文字を反転させる

頭の体操に、「反転した文字を読むトレーニング」をしたいと思ったので、ブラウザアプリを作りたいと思います。

 

まずは、ブラウザに「文字を反転させる」実装をしていきます。

CSSで文字を反転させる方法

CSSで文字を反転させるには、

.text {
  transform: scaleX(-1);
  text-align: center;
}

 

でできます。

下はコードペンで実装したものです。見てみて下さい。

See the Pen 文字の反転 by MacLove (@maclove1) on CodePen.

文字の反転に成功しました。

次回は「ランダムな文字を表示する」を実装していきます。