変形
scale
scale は、要素を拡大・縮小します。transform の scale() と同じ変形を、transform とは別のプロパティとして書けます。
構文
none | [ <number> | <percentage> ]{1,3}プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border-radius: 8px 32px;
scale: 1.5;
}コントロール
x: <number> | <percentage>
y: <number> | <percentage>
解説
値の書き方
横（x）、縦（y）の順に、倍率を数か % で書きます（scale: 1.5 1）。1（100%）でそのまま、2 で 2 倍、0.5 で半分です。初期値は none で、大きさを変えません。
- 1 つだけ書くと、縦も同じ倍率になります。y を省くと 0 になる
translateとは違います。 - 負の値で反転します。
scale: -1 1は左右反転です。 - 3 つ目に奥行き（z）の倍率も書けますが、平らな要素では、ほかの 3D の変形と組み合わせないと見た目は変わりません。このページのコントロールでは扱っていませんが、コードには書けます。
大きさを変える中心は transform-origin （初期値は要素の中央）です。このページのプレビューでは、点線の枠が元の大きさです。width などと違って、拡大・縮小しても周りの要素の配置は変わらず、はみ出した分は重なって描かれます。
transform との関係
translate・rotate・scale は transform とは別のプロパティなので、重ねて書くとどれも効きます。4 つを全部書くと、transform: translate() rotate() scale() … のように、この順に並べて transform の値の前に足したのと同じになります。ほかの変形はそのままにして、倍率だけをホバーで変えたり、アニメーションしたりするときに便利です。
Chrome・Edge（104 以降）、Firefox（72 以降）、Safari（14.1 以降）が対応しています。