Skip to content
CodeSweetly Logo CodeSweetly Logo CodeSweetly
Blog
Latest: JSX in React explained clearly without any framework

CSS scale() Function – How to Resize Elements in CSS

scale() transforms an element by resizing (scaling) it two-dimensionally from a fixed point.

Syntax of the CSS scale() Function

scale() accepts two arguments. Here is the syntax:

element {
  transform: scale(x, y);
}

Note the following:

  • The x argument can be a number or percentage. It specifies the element’s scaling factor along the x-axis.
  • The y argument can also be a number or percentage. It defines the element’s scaling factor along the x-axis.
  • Y-axis’ default value is x. Therefore, if you do not provide a y argument, the browser automatically uses x’s value.
  • Suppose x and y are equal. In that case, browsers will scale your element uniformly and preserve its aspect ratio.
  • Whenever you include scaling or zooming animations in your app, provide users an option to turn off animations. This option is necessary because scaling and zooming animations cause accessibility issues.

Illustration of the 2D Cartesian coordinate system

A two-dimensional Cartesian coordinate system showing the X- and Y-axis

Examples of the CSS scale() Function

Below are some examples of how the CSS scale() function works.

How to scale an element uniformly along the X- and Y-axis in CSS

img {
  transform: scale(0.3);
  transform-origin: left;
}

Try Editing It

The snippet above used the scale() function to specify a 0.3 scaling factor for the image element along the X- and Y-axis.

How to scale an element nonuniformly along the X- and Y-axis in CSS

img {
  transform: scale(0.3, 65%);
  transform-origin: top left;
}

Try Editing It

The snippet above used the scale() function to specify a 0.3 scaling factor for the image along the X-axis and 65% along the Y-axis.

How to scale an element along only the X-axis

img {
  transform: scale(0.3, 1);
  transform-origin: top left;
}

Try Editing It

The snippet above used the scale() function to specify a 0.3 scaling factor for the image along only the X-axis.

How to scale an element along only the Y-axis

img {
  transform: scale(100%, 0.2);
  transform-origin: top left;
}

Try Editing It

The snippet above used the scale() function to specify a 0.2 scaling factor for the image along only the Y-axis.

CSS scale() Function vs. scale Property: What’s the Difference?

The CSS scale() function and the CSS scale property provide two similar ways to specify a scale transformation.

The main differences between the two scaling techniques are as follows:

  • The CSS scale property allows scaling an element without using the CSS transform property.
  • The CSS scale property’s syntax is shorter than its function alternative.
  • The CSS scale property saves you from remembering the specific order to position the transform functions.
  • Browsers calculate the transform functions’ matrix in the order you assigned them to the CSS transform property—from left to right.
  • Browsers calculate the transform properties’ matrix in the following transformation matrix order:
    1. translate
    2. rotate
    3. scale

Here’s an example:

Use the CSS scale property to scale an element nonuniformly along the X- and Y-axis.

img {
  scale: 0.3 65%; /* Equal to a transform: scale(0.3, 65%) property */
  transform-origin: top left;
}

Try Editing It

The snippet above used the scale property to specify a 0.3 scaling factor for the image along the X-axis and 65% along the Y-axis.

Support CodeSweetly