translateZ()
该translateZ() CSS函数沿着z轴在三维空间中重新定位元素，即，从观察者的角度而言更近或者更远。这个变换是由一个<length>元素定义的，它指定元素向内或向外移动的距离。
注： translateZ(tz)相当于translate3d(0, 0, tz)。
语法
translateZ(tz)可能值
tz表示平移矢量的z分量的<length>值。正值将元素移向观察者，负值则远离。
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. | A translation is not a linear transform in ?3 and cannot be represented using a matrix in the Cartesian coordinate system. | 10000100001t0001 |
实例
在这个例子中，创建了两个框。一个正常地位于页面上，不进行平移。第二个是通过应用透视图来创建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显示设备观看时更接近元素。
结果
规范
Specification | Status | Comment |
|---|---|---|
CSS Transforms Level 2The definition of 'transform' in that specification. | Editor's Draft | Adds 3D transform functions to the CSS Transforms standard. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 12.0 -webkit 36 | (Yes) | 10.0 -moz 16.0 (16.0) | 10.0 | 15.0-webkit 23 | 4.0 -webkit 9.0 |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
Basic support | 3.0-webkit | (Yes)-webkit | (Yes) | (Yes) | (Yes) | 22-webkit | 3.2 (Yes)-webkit 9.0 |
另见
transform
<transform-function>
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
