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

スポンサーリンク

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

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

デモ画像

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

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

CSSで左右反転する

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

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

scaleでは、負の値が設定できます
x軸でマイナス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";
}

使う頻度は少ないかもしれないですが、
覚えておいて損はないはずです。

スポンサーリンク