The ** scale3d()** CSS function defines a transformation that resizes an element in 3D space. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. Its result is a

`<transform-function>`

data type.The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

This scaling transformation is characterized by a three-dimensional vector. Its coordinates define how much scaling is done in each direction. If all three 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 `scale3d()`

function is specified with three values, which represent the amount of scaling to be applied in each direction.

scale3d(sx,sy,sz)

### Values

`sx`

- Is a
`<number>`

representing the abscissa of the scaling vector. `sy`

- Is a
`<number>`

representing the ordinate of the scaling vector. `sz`

- Is a
`<number>`

representing the z-component of the scaling vector.

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

This transformation applies to the 3D space and can't be represented on the plane. | $\left(\begin{array}{cc}sx0& 0\\ 0sy& 0\\ 0& 0& sz\end{array}\right)$ | $\left(\begin{array}{ccc}sx0& 0& 0\\ 0sy& 0& 0\\ 0& 0& sz& 0\\ 0& 0& 0& 1\end{array}\right)$ |

## Examples

### Without changing the origin

#### HTML

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

#### CSS

div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); background-color: pink; }

#### Result

### Translating the origin of the transformation

#### HTML

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

#### CSS

div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); transform-origin: left; background-color: pink; }

#### Result

## Browser compatibility

Please see the `<transform-function>`

data type for compatibility info.