【CSS】transform: scale()で要素を上下・左右に反転させる方法

Webサイト制作をしていると、要素や画像を反転させたい場面があるかと思います。

特に矢印のアイコンなどは、右向き&左向き、上向き&下向きなどセットで必要な場合が多いですよね。

それぞれ用意してもいいのですが、パターンが多い場合は少し手間がかかります…。

そこで今回の記事では、CSS関数のscale()を使用して要素を簡単に反転させる方法を紹介します！

上記の4つを解説していきますので、ぜひ参考にしてみてください。

scale()で左右反転させる方法

右向きの矢印の画像を用意したので、実際に左右反転する方法を見ていきましょう。

オリジナル画像

CSS適用後

.reflect-x {
  transform: scale(-1, 1);
}

scale()の1つ目の値に-1を指定することで、要素を左右反転させることができます。

.reflect-x {
  transform: scaleX(-1);
}

また、scaleX()を使用してX軸方向のみに-1を指定しても同じ意味になります。

矢印が左右反転しているのが確認できますね。

scale()で上下反転させる方法

続いては下向きの矢印を上下反転させる方法を見ていきます。

オリジナル画像

CSS適用後

.reflect-y {
  transform: scale(1, -1);
}

scale()の2つ目の値に-1を指定することで、要素を上下反転させることができます。

.reflect-y {
  transform: scaleY(-1);
}

また先程と同様に、scaleY()を使用してY軸方向のみに-1を指定しても同じ意味になります。

下向きの矢印が上向きになっているのが確認できますね。

scale()で上下左右反転させる方法

次は、上下左右に反転させる方法を見ていきます。

これに関しては使い道があまりなさそうですが、念のため紹介しておきますね。

オリジナル画像

CSS適用後

.reflect-xy {
  transform: scale(-1, -1);
}

scale()の2つの値にそれぞれ-1を指定することで、要素を上下左右反転させることができます。

transform: scaleX(-1) scaleY(-1);

また、scaleX()とscaleY()を分けて書いても同じ意味になりますね。

画像が上下左右に反転しているのが確認できたかと思います。

scale()で背景画像を反転させる方法

ここからは、要素そのものではなく背景画像のみを反転させる方法を紹介していきます。

まずはオリジナル画像と、実装したい内容を確認しておきます。

背景画像のみが反転し、中のテキストはそのままになっているのが確認できたかと思います。

以下でさっそく実装方法を見ていきましょう。

手順1. まずはscale()で親要素を反転させる

<div class="bg">
  <div class="bg__inner">
    <p>猫の写真。</p>
    <p>ここにサンプルの文章が入ります。</p>
  </div>
</div>

HTMLは、上記のとおりです。

まずbgというクラスがついたdivタグに背景画像を設置。

その中にbg__innerのdivタグを用意し、この中にテキストなどのコンテンツを配置します。

ここでbgにscale(-1, 1)を指定して、背景画像を左右反転させてみましょう。

.bg {
  background-image: url('背景画像を設置');
  transform: scale(-1, 1);
}

※コードは必要な部分以外は省略しています。

実装結果を確認すると、背景画像だけでなく中の要素まで反転してしまっていますね。

これは親要素であるbgにscale()がかかっているため、その中にある要素もすべて反転してしまうことが原因です。

背景画像のみを反転させ、中の要素はそのままの状態にする方法を、次で見ていきましょう。

手順2. 中の要素にもscale()を指定して反転させる

<div class="bg">
  <div class="bg__inner">
    <p>猫の写真。</p>
    <p>ここにサンプルの文章が入ります。</p>
  </div>
</div>

HTMLを確認してみると、bg__innerクラスのdivの中に全てのコンテンツが配置されていますね。

先程はbgにscale(-1, 1)を指定しましたが、bg__innerにも同じ指定をすることで、コンテンツのみ元の状態に戻すことができます！

.bg {
  background-image: url('背景画像を設置');
  transform: scale(-1, 1);
}

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

これで背景画像のみを反転させることができました！

背景画像のみ反転させる必要がある場合は、ぜひこのテクニックを使ってみてください。

【まとめ】scale()で要素を上下・左右に反転させる方法

transformプロパティのscale()を使用して、要素を上下・左右に反転させる方法を紹介しました。

以下に今回の実装コードをまとめておきます。

/* 左右に反転 */
.reflect-x {
  transform: scale(-1, 1); /* 書き方1 */
  transform: scaleX(-1);   /* 書き方2 */
}

/* 上下に反転 */
.reflect-y {
  transform: scale(1, -1); /* 書き方1 */
  transform: scaleY(-1);   /* 書き方2 */
}

/* 上下左右に反転 */
.reflect-y {
  transform: scale(-1, -1); /* 書き方1 */
  transform: scaleX(-1) scaleY(-1);   /* 書き方2 */
}

実際のWeb制作では、特にページネーションやスライダーの矢印アイコンを実装する際によく使われるテクニックです。

また、アイコン画像だけでなく、どんなHTML要素にも使うことができますので、ぜひ活用してみてください。

scale()は要素の反転だけでなく、要素を拡大・縮小することもできるので、興味があれば以下の記事もどうぞ。

あわせて読みたい

【CSS】transform: scale()で要素を拡大・縮小する方法 今回は、CSSアニメーションを設定する際によく使うscale()を紹介します。 この機能を使うことで、要素を自由に拡大・縮小することができますので、是非参考にしてみてく…