CSS scale() Function

❮ Previous Functions Next ❯


.example {
  transform: scale(0.5);


The scale() css function defines a transformation that resizes an element on the 2D plane.

Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales.

This scaling transformation is characterized by a two-dimensional vector. Its coordinates define how much scaling is done in each direction.

Note: The scale() function only scales in 2D. To scale in 3D, use scale3d() instead.

Version: CSS3

Standard Syntax


scale(sx, sy)

The scale() function is specified with either one or two values, which represent the amount of scaling to be applied in each direction.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Function Arguments

The following table describes the arguments of this function.

Argument Description
sx Specifies a number or percentage representing the abscissa of the scaling vector.
sy Specifies a number or percentage representing the ordinate of the scaling vector. If not defined, its default value is sx, resulting in a uniform scaling that preserves the element's aspect ratio.

See also

❮ Previous Functions Next ❯