More than 3 years have passed since last update.

【初心者でもわかる】CSSで鏡文字にする方法

Posted at 2021-05-03

#どうも7noteです。鏡文字の作り方を解説

CSSで鏡文字を作る方法を解説します。
文字を反転させれば鏡文字になるので、反転させるためにtransformを使います。

transformの中でも2つの方法で反転を再現することができます。

鏡文字の作り方

###・scaleX()を使った方法

style.css

span.mirror {
  transform: scaleX(-1);
  display: inline-block;
}

###・rotateY()を使った方法

style.css

span.mirror {
  transform: rotateY(180deg);
  display: inline-block;
}

※インライン要素には効かないので注意！

左右に反転させるにはscaleもしくはrotateを使います。

scaleは本来大きさを変更するものですが、値がマイナスになると反転するので等倍のマイナス値を指定することで反転ができます。

rotateは回転をさせるときに使います。y軸(縦)を中心に回転させ、文字を反転させます。

２つの方法を紹介しました。
どちらの方法でも簡単なので、好きな方でいいかなと思います。