画像を編集する必要なし！CSSで画像を反転させる方法

久しぶりに電車で川越市に行ってきたjyunzyです。
大学を卒業してからは、川越駅にはずっと行ってませんでした。
随分変わりましたね。特に西口方面。すっかりビジネス街になっていました。
暫く立ち寄っていない場所に遊びに行くのもいいですね。

今回はCSSで画像を反転させる方法をご紹介します。

矢印や吹き出しなど、向きを変えて使いたい画像ってありますよね？
普通はPhotoshopやIllustratorなどを使って画像を反転させますが、実はCSSでも反転できます。

transformプロパティを使って反転してみましょう。

　左右反転させる場合

.turn_l-r {
  transform: scale(-1, 1);
}

　上下反転させる場合

.turn_u-d {
  transform: scale(1, -1);
}

画像では無いですが、Font Awesomeにも使う事ができます。

こっちは画像編集ソフトでは反転できないので、CSSで反転する方法は重宝しますよ。