translateZ()

translateZ()

该translateZ() CSS函数沿着z轴在三维空间中重新定位元素，即，从观察者的角度而言更近或者更远。这个变换是由一个<length>元素定义的，它指定元素向内或向外移动的距离。

注： translateZ(tz)相当于translate3d(0, 0, tz)。

语法

translateZ(tz)

可能值

tz表示平移矢量的z分量的<length>值。正值将元素移向观察者，负值则远离。

实例

在这个例子中，创建了两个框。一个正常地位于页面上，不进行平移。第二个是通过应用透视图来创建3D空间，然后移向用户。

HTML

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

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显示设备观看时更接近元素。

结果

规范

浏览器兼容性

另见

• transform

• <transform-function>