CSSで画像を左右反転させる方法

左右で対になった画像を置く場合がありますよね？

例えば、カルーセルの左右の矢印とか。

これ、左右の矢印を画像で書きだそうとしがちです。
でもそれぞれ書きだすのはナンセンス。 どっちか1個で充分なんですよ。

CSSで片方を反転させればいいのです。

CSSで左右反転する

transformプロパティを使って、反転しちゃいましょう。

.flip-horizontal {
    transform: scale(-1, 1);
}

scaleでは、負の値が設定できます。
x軸でマイナス1を設定すると、あら不思議。
左右反転させることが出来ます。

ぼくは業務でもかなりの頻度で使っています。

rotate(180deg)でもできるけど…

左右対称の画像の場合、rotate(180deg) で180度回転させることでも反転させられます。

.flip-horizontal {
    transform: rotate(180deg);
}

ただし、こちらはあまりおすすめできません。

画像の中心がずれている場合、きれいに左右反転させることができないのです。
これは transform-origin: 50% 50% を指定しても解決できません。

ですので、画像の反転は transform: rotate(-1, 1) がおすすめです。

上下反転するには

もし上下反転させたければ、scale(1, -1) とy軸に設定すればいいのです。

.flip-vertical {
    transform: scale(1, -1);
}

ちなみに古いIEでも

IE8などでも反転させたい場合は、次のように filter プロパティを使いましょう。

.flip-horizontal {
    transform: scale(-1, 1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.flip-vertical {
    transform: scale(1, -1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

結構使う頻度が多いです。覚えておいて損はありません。