変形

zoom

zoom は、要素を中身ごと拡大・縮小します。transform の scale と違い、大きくした分だけまわりの要素を押しのけます。

構文

<number [0,∞]> | <percentage [0,∞]>

1234

プリセット

見本

項目

右下の角をドラッグするとサイズを変えられます

.box {
  display: flex;
  align-items: flex-start;
}

.box > :nth-child(2) {
  zoom: 1.5;
}

zoom1.5

1234

1 で等倍、2 で 2 倍、0.5 で半分です。150% のようにパーセントでも書けます。負の値は書けず、0 は互換のため 1 と同じに扱われます。初期値は 1 です。

zoom は、幅や余白、文字の大きさなどの長さそのものを掛け算します。そのため要素が実際に大きくなり、まわりのレイアウトも動きます。プレビューでは 2 番目の項目に書いているので、3・4 番目の項目が押し出されます。

scale や transform: scale() は、描いたあとの見た目だけを拡大します。場所は元の大きさのままなので、まわりの要素に重なります。

パーセントや auto で決まる長さは変わりません。width: 50% の要素に zoom: 2 を書いても幅は親の半分のままで、中の文字や余白だけが大きくなります。
zoom 自体は継承しませんが、子孫の長さも一緒に拡大されます。入れ子にすると掛け算になり、zoom: 2 の中の zoom: 2 は 4 倍です。
長く非標準のプロパティで、Firefox は対応していませんでした。仕様にまとめられ、Firefox も 126 から対応しています。