CSS 中的 translate3d（） 函数用于在三维空间中翻译或移动元素。结果是 <transform-function> 数据类型。
translate3d（） 函数基于三维向量 [tx， ty， tz] 进行转换。坐标值确定元素的移动方向。
可能的值
函数 translate3d（） 将以下值作为参数。
- tx：可以是 <length> 或 <percentage> 值，表示平移向量 [tx， ty， tz] 的横坐标（水平，x 分量）。
- ty：可以是表示平移向量 [tx， ty， tz] 的纵坐标（垂直，y 分量）的 <length> 或 <percentage> 值。
- tz：只能是一个 <length> 值，表示转换向量 [tx， ty， tz] 的 z 分量。它不能具有 <percentage> 值，如果给定包含转换的属性，则该值将无效。
语法
transform: translate3d(tx, ty, tz);
CSS translate3d（） - 长度值
以下是 translate3d（） 函数的示例，其中包含可以将长度值传递给它的各种方式，即正值和负值：
<html>
<head>
<style>
#container {
border: 5px solid black;
margin: 25px;
}
#sample {
height: 110px;
width: 110px;
border: 2px solid black;
}
.translate-3d-length {
transform: translate3d(20px, 30px, 20px);
background-color: yellowgreen;
}
.translate-3d-negative {
transform: translate(-20px, -10px, -30px);
background-color: tomato;
}
</style>
</head>
<body>
<div id="container">
<div id="sample" style="background-color: lightyellow;">no translate() applied</div>
<div class="translate-3d-length" id="sample">translate3d(20px, 30px, 20px)</div>
<div class="translate-3d-negative" id="sample">translate3d(-20px, -10px, -30px)</div>
</div>
</body>
</html>
CSS translate3d（） - 结合 x 轴和 z 轴值
以下是 translate3d（） 函数的示例，其中长度值传递给 x 轴和 z 轴：
<html>
<head>
<style>
#container {
border: 5px solid black;
margin: 25px;
}
#sample {
height: 110px;
width: 110px;
border: 2px solid black;
}
.translate-3d-length {
transform: translate3d(20px, 0, 20px);
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="container">
<div id="sample" style="background-color: lightyellow;">no translate3d()</div>
<div class="translate-3d-length" id="sample">translate3d(20px, 0, 20px)</div>
<div id="sample" style="background-color: lightyellow;">no translate3d()</div>
</div>
</body>
</html>
CSS translate3d（） - 结合 y 轴和 z 轴值
以下是 translate3d（） 函数的示例，其中长度值以及 perspective（） 值一起传递给 y 轴和 z 轴：
<html>
<head>
<style>
#container {
border: 5px solid black;
margin: 25px;
}
#sample {
height: 110px;
width: 110px;
border: 2px solid black;
}
.translate-3d-length {
transform: perspective(580px) translate3d(0, 30px, 50px);
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="container">
<div id="sample" style="background-color: lightyellow;">no translate3d()</div>
<div class="translate-3d-length" id="sample">translate3d(0, 30px, 50px)</div>
<div id="sample" style="background-color: lightyellow;">no translate3d()</div>
</div>
</body>
</html>
