scale は要素の大きさ変化させる事が出来ます。

scale()

scale は下記の形式で要素の大きさを指定します。指定には倍率を指定します。

transform: scale(倍率);

様々な動きの確認

scaleの動きを確認します。前提として以下のhtmlとcssを使用します。

<div class='test-box'></div>

.test-box {
  width: 100px;
  height: 100px;
  background-color: aqua;
}

以下のような要素に対してscaleの動きを確認します。

ホバーすると要素の大きさが1.5倍になるような動きをさせてみます。

.test-box:hover {
  transform: scale(1.5);
}

ホバーすると要素の大きさが半分になるような動きをさせてみます。

.test-box:hover {
  transform: scale(0.5);
}

ホバーすると要素の幅のみ2倍になるような動きをさせてみます。

2つ目に指定した数値は高さの倍率の指定になります。1を指定しているので高さは変わりません。

.test-box:hover {
  transform: scale(2, 1);
}

以下のような書き方と同等です。

.test-box:hover {
  transform: scaleX(2);
}

ホバーすると要素の高さのみ2倍になるような動きをさせてみます。

2つ目に指定した数値は幅の倍率の指定になります。1を指定しているので幅は変わりません。

.test-box:hover {
  transform: scale(1, 2);
}

以下のような書き方と同等です。

.test-box:hover {
  transform: scaleY(2);
}

.test-box:hover {
  transform-origin: top left;
  transform: scaleX(2);
}

特にありません。