CSSで簡単に要素を反転させる方法

CSSのtransformプロパティを使って、要素を簡単に反転させる方法をご紹介します。以下のコードを使うことで、要素を左右または上下に反転させることができます。

左右反転

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

このクラスを適用すると、要素が左右に反転します。たとえば、画像を左右反転させたい場合に便利です。

上下反転

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

このクラスを適用すると、要素が上下に反転します。こちらは、上下に反転させたい場合に使用します。