CSS scale()

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

Syntax

transform: scale(<value>);

Copy to clipboard
Copy to clipboard

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%);
}

Copy to clipboard
Copy to clipboard

Example 2

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

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

Copy to clipboard
Copy to clipboard