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>
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
