scaleZ()

**scaleZ()** CSS 函数 定义了一个沿 z 轴调整元素大小的变换。其结果是 <transform-function> 数据类型。

试一试

此缩放变换通过一个常数因子修改每个元素点的 z 坐标，除非缩放因子为 1，在这种情况下，该函数为恒等变换。缩放不是各向同性的，并且元素的角度不会保持不变。scaleZ(-1) 定义了一个轴对称，其中 z 轴穿过原点（如 transform-origin 属性指定的那样）。

在上面的交互式示例中，perspective: 550px;（创建 3D 空间）和 transform-style: preserve-3d;（因此子元素，即立方体的 6 个面，也位于 3D 空间中）已设置为立方体。

注意：scaleZ(sz) 等效于 scale3d(1, 1, sz)。

语法

css
scaleZ(s)

值

s

是一个 <number>，表示要应用于元素每个点的 z 坐标的缩放因子。

笛卡尔坐标 在 ℝ^2 齐次坐标 在 ℝℙ^2 笛卡尔坐标在 ℝ^3 齐次坐标在 ℝℙ^3
此变换应用于 3D 空间，不能在平面上表示。 ( 1 0 0 0 1 0 0 0 s ) \left( \begin{array}{ccc} 1 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & s \end{array} \right) ( 1 0 0 0 0 1 0 0 0 0 s 0 0 0 0 1 ) \left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & s & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)

示例

HTML

html
<div>Normal</div>
<div class="perspective">Translated</div>
<div class="scaled-translated">Scaled</div>

CSS

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;
}

结果

规范

规范
CSS Transforms 模块级别 2
# funcdef-scalez

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅