transform: scale()とzoomプロパティの違い

いままでCSSで要素や画像を拡大・縮小するにはtransform: scale()を用いるのが一般的であったが、2024年に新たにzoomプロパティがBaselineに追加された。この2つの機能の違いについてまとめる。

scale()

transform: scale(倍率)を使うことで、要素や画像など2次元平面上のオブジェクトを拡大・縮小することができる。また、水平・垂直方向の倍率をそれぞれ指定することができる。

.item {
  /* 比率を保ったまま2倍に拡大 */
  transform: scale(2);

  /* 水平・垂直方向をそれぞれ */
  transform: scale(2, 1.5);
  transform: scaleX(2) scaleY(1.5);
}

ただし、transformプロパティは、一部のtransform関数のみを個別に指定することができないなど面倒な点があった。

※translateなど一部関数は独立してtranslateプロパティに分離されている。

.item {
  transform: scale(2);

  /* scale(2)が打ち消される */
  transform: skew(10deg);
}

zoomプロパティ

本的にはscale()と同じだが、ページレイアウトに影響を与える点が異なっている。

.item {
  zoom: 2;
  /* zoom: 200%; */
}

値

• normal: デフォルト値。通常のサイズ（100%）でレンダリングする
• unset: ズームを元に戻す
• <percentage>: パーセントでズーム値を指定する
• <number>: 数値（1 = 100%）でズーム値を指定する

まとめ

• scale() … ページレイアウトに影響を与えない
• zoom … ページレイアウトに影響を与える

デモ