Jump to the content

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

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";
    }
    

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

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×