translateZ()

**translateZ()** CSS 函数 在 3D 空间中沿 z 轴重新定位元素，即更靠近或更远离查看者。其结果为 <transform-function> 数据类型。

试一试

此转换由 <length> 定义，它指定元素或元素移动的距离。

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

**注意：** translateZ(tz) 等效于 translate3d(0, 0, tz)。

语法

css
translateZ(tz)

Values

tz

一个 <length> 表示平移向量的 z 组件 [0, 0, tz]。在 笛卡尔坐标系 中，它表示沿 z 轴的位移。正值将元素移向查看者，负值将元素移向更远。

笛卡尔坐标系 在 ℝ^2 上 齐次坐标 在 ℝℙ^2 上 笛卡尔坐标系在 ℝ^3 上 齐次坐标在 ℝℙ^3 上
此转换应用于 3D 空间，无法在平面上表示。 平移不是ℝ^3中的线性变换，不能用笛卡尔坐标矩阵表示。 ( 1 0 0 0 0 1 0 0 0 0 1 t 0 0 0 1 ) \left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & t \\ 0 & 0 & 0 & 1 \end{array} \right)

示例

在这个例子中，创建了两个盒子。一个正常地放置在页面上，没有进行任何平移。第二个通过应用透视来创建 3D 空间，然后向用户移动。

HTML

html
<div>Static</div>
<div class="moved">Moved</div>

CSS

css
div {
  position: relative;
  width: 60px;
  height: 60px;
  left: 100px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translateZ(200px);
  background-color: pink;
}

这里真正重要的是类“moved”；让我们看看它做了什么。首先，perspective() 函数将观察者相对于位于 z=0（本质上是屏幕表面）的平面定位。值 500px 表示用户位于 z=0 处的图像“前面” 500 像素。

然后，translateZ() 函数将元素从屏幕“向外”移动 200 像素，朝向用户。这将使元素在 2D 显示器上查看时显得更大，或者在使用 VR 头显或其他 3D 显示设备时显得更近。

请注意，如果 perspective() 值小于 translateZ() 值，例如 transform: perspective(200px) translateZ(300px);，则转换后的元素将不可见，因为它超出了用户的视窗。透视值和 translateZ 值之间的差值越小，用户离元素越近，转换后的元素看起来就越大。

注意：由于变换的组合不是可交换的，因此写入不同函数的顺序很重要。特别是，通常情况下，您希望 perspective() 放在 translateZ() 之前。

结果

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅