CSS scale() Function

The CSS scale() function is used to scale elements in a two-dimensional space.

The scale() function scales an element based on the number/s that you provide as an argument. You can scale in the direction of the x-axis, the y-axis, or both.

The scale() function works like this:

If you provide only one parameter, it will scale the element along both axes. If you provide two parameters, the first scales the element along the x axis, and the second parameter scales it along the y axis. Both parameters can be any valid number value.

Scale along both Axes

Here's an example of scaling an element in the direction of both the x axis and the y axis.

Here we use scale(2) to make the element scale along both axes but we could also have used scale(2, 2):

<style>
  .scaled {
    transform-origin: top left;
    transform: scale(2);
  }
</style>

<img src="/pix/samples/9s.jpg" alt="Sample image">
<img class="scaled" src="/pix/samples/9s.jpg" alt="Sample image">

Scale along the `x`-axis

Here's an example of scaling an element in the direction of the x axis. Note that we use a parameter of 1 for the y axis so that it remains at its original scale.

<style>
  .scaled {
    transform-origin: top left;
    transform: scale(2, 1);
  }
</style>

<img src="/pix/samples/9s.jpg" alt="Sample image">
<img class="scaled" src="/pix/samples/9s.jpg" alt="Sample image">

Scale along the `y`-axis

Here's an example of scaling an element in the direction of the y axis:

<style>
  .scaled {
    transform-origin: top left;
    transform: scale(1, 2);
  }
</style>

<img src="/pix/samples/9s.jpg" alt="Sample image">
<img class="scaled" src="/pix/samples/9s.jpg" alt="Sample image">

Removing `transform-origin`

In the previous examples, I use transform-origin to adjust the origin of the transformation. Specifically, I use transform-origin: top left; so that the images don't overlap as a result of the scaling operation.

The default origin for the rotation is 50% 50% (i.e. the center). Therefore, if we remove this property, the image will transform based on this value.

So here's an example of what the scale operation might look like when using the default transform-origin value.

<style>
  .scaled {
    transform: scale(2);
  }
</style>

<img src="/pix/samples/9s.jpg" alt="Sample image">
<img class="scaled" src="/pix/samples/9s.jpg" alt="Sample image">

Official Syntax

The official syntax of the scale() function is as follows:

Possible Values

The scale() function accepts number parameters that define the scaling vector for the scale operation.

A number is either an integer, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits and optionally an exponent composed of e or E and an integer.

CSS Specifications

The scale() function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.