CSSで要素を左右・上下反転、回転させる方法【transform】

CSSの transform プロパティを使うと、画像やHTML要素を左右・上下に反転したり、指定した角度に回転させたりできます。

本記事では、scaleX()、scaleY()、rotate() を使って、CSSで要素を反転・回転させる方法を紹介します。

左右反転

要素を左右反転するには、transform プロパティに scaleX(-1) を指定します。

<img class="mirror" src="image.jpg" alt="">

.mirror {
  transform: scaleX(-1);
}

scaleX() は、X軸方向（横方向）の拡大・縮小率を指定する関数です。

-1　を指定すると、横方向に反転するため、要素が左右反転します。

画像だけでなく、テキストやアイコンなど、さまざまなHTML要素に使用できます。

上下反転

要素を上下反転するには、scaleY(-1) を指定します。

.mirror {
  transform: scaleY(-1);
}

scaleY() は、Y軸方向（縦方向）の拡大・縮小率を指定する関数です。

-1 を指定すると、縦方向に反転するため、要素が上下反転します。

回転

要素を回転させるには、rotate() を使用します。

.rotate {
  transform: rotate(90deg);
}

rotate()の括弧内に回転させる角度を指定します。

例えば、以下のように指定できます。

.rotate90 {
  transform: rotate(90deg);
}

.rotate180 {
  transform: rotate(180deg);
}

.rotate270 {
  transform: rotate(270deg);
}

deg は角度を表す単位です。

正の値を指定すると時計回り、負の値を指定すると反時計回りに回転します。

.rotate {
  transform: rotate(-90deg);
}

反転と回転を組み合わせる

transform は、複数の変形を組み合わせて指定することもできます。

例えば、左右反転と回転を組み合わせる場合は、以下のように記述します。

.transform {
  transform: scaleX(-1) rotate(180deg);
}

このように、scaleX()、scaleY()、rotate() などの関数をスペースで区切って指定できます。

例えば、左右反転・上下反転・45度回転を組み合わせることもできます。

.transform {
  transform: scaleX(-1) scaleY(-1) rotate(45deg);
}

複数の変形を組み合わせる場合は、指定する順番によって結果が変わることがあるため注意しましょう。

まとめ

CSSの transform を使うことで、要素を簡単に反転・回転させることができます。

操作	CSS
左右反転	transform: scaleX(-1);
上下反転	transform: scaleY(-1);
90度回転	transform: rotate(90deg);
180度回転	transform: rotate(180deg);
反時計回りに90度回転	transform: rotate(-90deg);

画像やアイコンなどをCSSだけで反転・回転させたい場合は、transform を利用すると便利です。