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. Its result is a

`<transform-function>`

data type.This scaling transformation is characterized by a two-dimensional vector. Its coordinates define how much scaling is done in each direction. If both coordinates are equal, the scaling is uniform (*isotropic*) and the aspect ratio of the element is preserved (this is a homothetic transformation).

When a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. If it is negative, the result a point reflection in that dimension. A value of 1 has no effect.

## Syntax

The `scale()`

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

scale(sx) scale(sx,sy)

### Values

`sx`- A
`<number>`

representing the abscissa of the scaling vector. `sy`- A
`<number>`

representing the ordinate of the scaling vector. If not defined, its default value is

, resulting in a uniform scaling that preserves the element's aspect ratio.`sx`

Cartesian coordinates on ℝ^{2} |
Homogeneous coordinates on ℝℙ^{2} |
Cartesian coordinates on ℝ^{3} |
Homogeneous coordinates on ℝℙ^{3} |
---|---|---|---|

$\left(\begin{array}{cc}sx& 0\\ 0& sy\end{array}\right)$ | $\left(\begin{array}{cc}sx0& 0\\ 0sy& 0\\ 0& 0& 1\end{array}\right)$ | $\left(\begin{array}{cc}sx0& 0\\ 0sy& 0\\ 0& 0& 1\end{array}\right)$ | $\left(\begin{array}{ccc}sx0& 0& 0\\ 0& sy& 0& 0\\ 0& 0& 1& 0\\ 0& 0& 0& 1\end{array}\right)$ |

`[sx 0 0 sy 0 0]` |

## Examples

### Scaling the X and Y dimensions together

#### HTML

<div>Normal</div> <div class="scaled">Scaled</div>

#### CSS

div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */ background-color: pink; }

#### Result

### Scaling X and Y dimensions separately, and translating the origin

#### HTML

<div>Normal</div> <div class="scaled">Scaled</div>

#### CSS

div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */ transform-origin: left; background-color: pink; }

#### Result

## Accessibility concerns

Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. If you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferrably site-wide.

Also, consider making use of the `prefers-reduced-motion`

media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.

Find out more:

- MDN Understanding WCAG, Guideline 2.3 explanations
- Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1

## Specifications

Specification | Status | Comment |
---|---|---|

CSS Transforms Level 1 The definition of 'scale()' in that specification. |
Working Draft | Initial definition |

## Browser compatibility

Please see the `<transform-function>`

data type for compatibility info.