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

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

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

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

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

emoji782.gif 左右反転させる場合

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

emoji782.gif 上下反転させる場合

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

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

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

No related posts.

トラックバックURL