CSS 中的 translateZ（） 函数用于在 3D 空间中沿 Z 轴平移或移动元素，即离观众更近和更远。它是 CSS 中的转换函数之一，允许您修改网页上元素的位置和外观。结果是 <transform-function> 数据类型。
可能的值
函数 translateZ（） 只能接受一个参数。
- tz：它是一个 <length> 值，指定元素或元素向内或向外移动的距离。表示平移向量 [0， 0， tz] 的 z 分量。正值将元素移向观看者，而负值则将元素移得更远。
语法
transform: translateZ(tz);
perspective（） 函数定义了计算机屏幕平面与要应用 translateZ 的 HTML 元素之间的虚拟距离。
使用 perspective（） 和 translateZ（） 函数会显示一些意外行为。
当提供给 translateZ（） 的值大于或等于 perspective（） 的值时，应用该值的 HTML 元素将消失。
perspective（） 允许使用除零值 （0px， 0， 0em） 以外的任何值，因为它会导致 translateZ（） 效果被忽略。
当提供给 translateZ（） 的值大于或等于 perspective（） 的值时，应用该值的 HTML 元素将消失。
perspective（） 允许使用除零值 （0px， 0， 0em） 以外的任何值，因为它会导致 translateZ（） 效果被忽略。
CSS translateZ（） - 悬停时的翻译
以下是在按钮上与伪类 ：hover 一起使用的 translateZ（） 函数的示例。悬停时按钮的大小和位置会发生变化：
<html>
<head>
<style>
div {
height: 200px;
width: 300px;
border: 5px solid black;
background-color: beige;
margin: 50px;
display: inline-block;
}
button {
transform: perspective(150px) translateZ(20px);
transition: transform 100ms linear;
width: 80px;
height: 30px;
background-color: blue;
color: white;
margin: 30px;
}
button:hover {
transform: perspective(150px) translateZ(80px);
}
</style>
</head>
<body>
<div>
<h2>translateZ() example</h2>
<button>click</button>
</div>
</body>
</html>
CSS translateZ（） - 使用 perspective（） 进行翻译
以下是 translateZ（） 函数和 perspective（） 的示例。应用函数的 div 元素，位置基于传递给 translateZ（） 函数的值。
<html>
<head>
<style>
div {
height: 110px;
width: 110px;
border: 2px solid black;
background-color: aquamarine;
margin: 15px;
}
.translate-z-length {
transform: perspective(200px) translateZ(50px);
background-color: tomato;
}
</style>
</head>
<body>
<div>No translateZ() applied</div>
<div class="translate-z-length">translateZ() applied</div>
</body>
</html>
更改 perspective（） 和 translateZ（） 的值以查看效果。
perspective（） 函数负责将观看者相对于平面定位，即相对于屏幕表面 （z=0）。因此，在上面的示例中，值 0f 200px 表示用户位于图像前面 200 像素处。
translateZ（） 的值为 50px，表示元素从屏幕向外移动 50px，朝向用户。在 2D 显示器上查看时，该元素看起来更大。
函数的编写顺序很重要，因为转换的组合不是可交换的。perspective（） 函数应放在 translateZ（） 函数之前。
