Transform
scale
scale makes an element larger or smaller. It does the same as the scale() function of transform, as a property separate from transform.
Syntax
none | [ <number> | <percentage> ]{1,3}Preview
Code
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border-radius: 8px 32px;
scale: 1.5;
}Controls
About
Values
Write the horizontal (x) and then the vertical (y) factor as numbers or percentages (scale: 1.5 1). 1 (100%) keeps the size, 2 doubles it and 0.5 halves it. The initial value is none, which does not change the size.
- With one value, the vertical factor is the same. This differs from
translate, where leaving out y makes it 0. - Negative values flip the element.
scale: -1 1flips it left to right. - A third factor for depth (z) is allowed too, but on a flat element it makes no visible difference unless combined with other 3D transforms. The controls on this page don't cover it, but you can type it into the code.
It scales around transform-origin (the center of the element by default). In the preview on this page, the dashed outline is the original size. Unlike width and similar properties, scaling doesn't change the layout around the element, and anything that grows past its original box is drawn on top.
How it relates to transform
translate, rotate and scale are properties separate from transform, so writing them together applies all of them. Writing all four is the same as adding them in this order in front of the transform value, as in transform: translate() rotate() scale() …. This is handy for changing just the factor on hover or in an animation while leaving the other transforms as they are.
Chrome and Edge 104, Firefox 72 and Safari 14.1 and later support it.