【CSS】transform: scale()で要素を拡大・縮小する方法

2021年1月23日

今回は、CSSアニメーションを設定する際によく使うscale()を紹介します。

この機能を使うことで、要素を自由に拡大・縮小することができますので、是非参考にしてみてください。

scale()で要素を拡大する方法

まずは要素を拡大する方法を見ていきましょう。

以下に縦横100pxの正方形を用意しました。

.box {
  width: 100px;
  height: 100px;
  transform: scale(1);
}

scale()の中には数値を指定することができます。

この場合1が入っているため、要素のサイズの1倍 = そのままのサイズという意味になりますね。

次でこの正方形のサイズを2倍にしてみます。

.box {
  width: 100px;
  height: 100px;
  transform: scale(2);
}

scale()に2を指定することで、もとの大きさの2倍にすることができました。

このように、scale()に1以上の数値を指定することで要素を拡大することができます。

また小数点以下の数値も反映されるため、1.5や1.03などの数値も指定できます。

要素を水平(X軸)方向に拡大する

次は水平(X軸)方向に要素を拡大する方法を紹介します。

.box {
  width: 100px;
  height: 100px;
  transform: scale(1);
}

まずは元の要素である正方形を準備します。

この正方形の横幅を2倍にして、長方形を作ってみます。

.box {
  width: 100px;
  height: 100px;
  transform: scale(2, 1);
}

scale()には値を2つ指定することができ、それぞれ(X軸の値, Y軸の値)という意味になります。

ここでは1つ目の値に2を指定しているため、水平(X軸)方向の大きさが2倍になっていますね。

垂直方向の値は1なので、1倍 = そのままの大きさになっています。

要素を水平方向に拡大するには、以下の2通りの記述法があります。

transform: scale(X軸の値, 1);
transform: scaleX(X軸の値);

サンプルのように値を2つ指定してもいいですし、scaleXを使用してX軸方向に限定して指定することもできます。

要素を垂直(Y軸)方向に拡大する

続いては垂直方向に拡大する方法を見てみましょう。

.box {
  width: 100px;
  height: 100px;
  transform: scale(1);
}

この正方形を、縦長の長方形にしてみます。

.box {
  width: 100px;
  height: 100px;
  transform: scale(1, 2);
}

scale()の2つ目の値に2を指定することで、垂直方向のサイズを2倍にすることができました。

要素を垂直方向に拡大するには、以下の2通りの記述法があります。

transform: scale(1, Y軸の値);
transform: scaleY(Y軸の値);

scaleXと同じように、scaleYというY軸方向に限定して指定することもできます。

scale()で要素を縮小する方法

要素を拡大する方法を見てきましたので、次は縮小する方法を紹介していきます。

先ほどと同様、縦横100pxの正方形を例にして確認してきます。

.box {
  width: 100px;
  height: 100px;
  transform: scale(1);
}

この時点ではscale()の値は1なので、サイズはそのままです。

次でこの正方形のサイズを半分にしてみます。

.box {
  width: 100px;
  height: 100px;
  transform: scale(0.5);
}

scale()に0.5を指定することで、もとの大きさの半分にすることができました。

要素を縮小するには、scale()の値を0~1の間で指定します。

ただし0にすると要素が消えてしまうので、0より大きい数値にしてください。

要素を水平(X軸)方向に縮小する

次は水平(X軸)方向に要素を縮小する方法を紹介します。

.box {
  width: 100px;
  height: 100px;
  transform: scale(1);
}

まずは元の要素である正方形を準備。

この正方形の横幅を半分にして、縦長の長方形を作ってみます。

.box {
  width: 100px;
  height: 100px;
  transform: scale(0.5, 1);
}

scale()の1つ目の値に0.5を指定することで、水平方向のサイズを半分にすることができました。

要素を垂直(Y軸)方向に縮小する

最後は垂直(Y軸)方向に要素を縮小する方法を紹介します。

.box {
  width: 100px;
  height: 100px;
  transform: scale(1);
}

こちらが元の正方形です。

この正方形の縦幅を半分にして、横長の長方形を作ってみます。

.box {
  width: 100px;
  height: 100px;
  transform: scale(1, 0.5);
}

scale()の2つ目の値に0.5を指定することで、垂直方向のサイズを半分にすることができました。

【まとめ】transform: scale()で要素を拡大・縮小する方法

transformプロパティのscale()で要素を拡大・縮小する方法を紹介しました。

これを応用することで、ホバーすると大きさが変わるボタンや、要素を徐々に小さくするようなアニメーションを設定できるようになります！

以下に今回のコードをまとめてみました。

/* X軸, Y軸 */
transform: scale(XYの値);
transform: scale(Xの値, Yの値);

/* X軸のみ */
transform: scale(Xの値, 1);
transform: scaleX(Xの値);

/* Y軸のみ */
transform: scale(1, Yの値);
transform: scaleX(Yの値);

/* 要素を拡大 */
transform: scale(1~の数値を指定);

/* 要素を縮小 */
transform: scale(0~1の数値を指定);

scale()は要素の拡大・縮小だけでなく、要素を反転させることもできるので、気になる方は以下の記事も参考にしてみてください。