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.
scale3d()
function is specified with three values, which represent the amount of scaling to be applied in each direction.
scale3d(sx, sy, sz)
sx
<number>
representing the abscissa of the scaling vector.
sy
<number>
representing the ordinate of the scaling vector.
sz
<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. | |||
<div>Normal</div> <div class="scaled">Scaled</div>
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
background-color: pink;
}
<div>Normal</div> <div class="scaled">Scaled</div>
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;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Transforms Level 2
The definition of 'scale3d()' in that specification. |
编者草案 | 初始定义 |
Please see the
<transform-function>
data type for compatibility info.