# CSS - scale()

The `scale()`

CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one.

## Examples

### Scaling X dimension

#### HTML

<p>foo</p> <p class="transformed">bar</p>

#### CSS

p { width: 50px; height: 50px; background-color: teal; } .transformed { /* the same as transform: scaleX(2) scaleY(2);*/ transform: scale(2); background-color: blue; }

#### Result

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

#### HTML

<p>foo</p> <p class="transformed">bar</p>

#### CSS

p { width: 50px; height: 50px; background-color: teal; } .transformed { /* same as scaleX(2) scaleY(0.5) */ transform: scale(2, 0.5); transform-origin: left; background-color: blue; }

#### Result

## Syntax

scale(sx) or scale(sx,sy)

## Description

The `scale()`

CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one.

This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.

When outside the [`-1, 1]`

range, the scaling enlarges the element in the direction of the coordinate; when inside the range, it shrinks the element in that direction. When equal to `1`

it does nothing and when negative it performs a *point reflection* and the size modification.

`scale`

`()`

function only applies the transformation in the Euclidian plane (in 2D). To scale in the space, the `scale3D()`

function has to be used.*sx*- Is a
`<number>`

representing the abscissa of the scaling vector. *sy*- Is a
`<number>`

representing the ordinate of the scaling vector. If not present, its default value is, leading to a uniform scaling preserving the shape of the element.**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]` |

## License

© 2016 Mozilla Contributors

Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

https://developer.mozilla.org/en-us/docs/web/css/transform-function/scale