scaleZ()
scaleZ()
该scaleZ() CSS函数定义了沿着z轴调整元素大小的的变换。
它用一个常数因子修改每个单元点的纵坐标（除非比例系数是1，在这种情况下，该函数是恒等变换）。缩放不是各向同性的，元素的角度不守恒。scaleZ(-1)定义了一个关于穿过原点（由transform-origin属性指定）的z-轴对称的轴对称变换。
注意： scaleZ(sz)相当于scale3d(1, 1, sz)。
语法
scaleZ(s)
可能值
<number>s表示应用于元素的每个点的z坐标的缩放因子。
| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
|---|---|---|---|
| This transform applies to the 3D space and cannot be represented on the plane. | 10001000s | 1000010000s00001 |
实例
HTML
<div>Normal</div>
<div class="perspective">Translated</div>
<div class="scaled-translated">Normal</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.perspective {
/* Includes a perspective to create a 3D space */
transform: perspective(400px) translateZ(-100px
background-color: limegreen;
}
.scaled-translated {
/* Includes a perspective to create a 3D space */
transform: perspective(400px) scaleZ(2) translateZ(-100px
background-color: pink;
}
结果
另见
transform
- <transform-function>
