scale

scale is an individual transform property. It scales the rendered box around transform-origin without recalculating neighboring layout as a width/height change would.

Scale one axis differently

The first square grows equally in both axes. The second grows horizontally while shrinking vertically, so its proportions change.

<p>Uniform 1.2</p>
<div class="stage"><div class="square uniform">Scale</div></div>
<p>1.5 horizontally, .75 vertically</p>
<div class="stage"><div class="square stretched">Scale</div></div>

.stage {
  padding: 2rem;
  background: #eff6ff;
  margin-block: 1rem;
}
.square {
  width: 70px;
  height: 50px;
  background: #2563eb;
  color: white;
  display: grid;
  place-items: center;
}
.uniform {
  scale: 1.2;
}
.stretched {
  scale: 1.5 0.75;
}

Change scale without clearing rotation

The checkbox sets only scale. The independent rotation stays in place. There is no continuous zoom animation in this example.

<input class="grow" id="grow" type="checkbox" /><label for="grow"
  >Enlarge the rotated square</label
>
<div class="stage"><div class="square">Scale</div></div>

.stage {
  padding: 2rem;
  background: #eff6ff;
  margin-block: 1rem;
}
.square {
  width: 70px;
  height: 50px;
  background: #2563eb;
  color: white;
  display: grid;
  place-items: center;
}
.square {
  rotate: 10deg;
  scale: 1;
}
.grow:checked ~ .stage .square {
  scale: 1.25;
}

Values and defaults

The initial value is none and the property is not inherited. One number/percentage scales x and y equally; two set x/y separately; three set x/y/z. One or 100% leaves an axis’s visual size unchanged. Zero collapses an axis; a negative factor reflects it. None removes this individual scale but not scaling inside transform.

Common mistakes

The old draft documented only scale() rather than the individual property. Unequal factors do not preserve aspect ratio. Scaling text or controls does not allocate extra normal-flow space and may make them overlap. Non-none scaling creates transform stacking/containing-block effects. Animated zoom can be uncomfortable; prefer reduced-motion alternatives and avoid hiding essential content at scale zero.

Learn transform, rotate, and transform-origin.

Sources and browser support

MDN: scale describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.