scale()

Changes the size of an element to make it larger or smaller.

Syntax

transform: scale(<value>);

where a required <value> can be one of the following:

  • Number value: .25, 1.5
  • Percentage value: 25%, 150%

Note: A single value will be applied to the horizontal and vertical scale of an element. If a second value is provided, the first value will apply to the horizontal scale and the second value will apply to the vertical scale.

Example 1

Shrink the .avatar element by 50%:

.avatar {
transform: scale(50%);
}

Example 2

Grow the .avatar element by 50% horizontally and 100% vertically:

.avatar {
transform: scale(1.5, 2);
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy

Contributors