CSS参考手册
变换 | Transforms
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>
变换 | Transforms相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。