translate3d()

translate3d() CSS 函数在 3D 空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

该函数是 CSS3 变换功能的一部分，允许开发者在网页上创建复杂的 3D 效果。通过 translate3d()，元素可以在 x 轴（水平方向）、y 轴（垂直方向）和 z 轴（深度方向）上同时移动，从而创造出立体感和空间感。

translate3d() 函数的语法格式为：translate3d(tx, ty, tz)，其中 tx 表示 x 轴方向的移动距离，ty 表示 y 轴方向的移动距离，tz 表示 z 轴方向的移动距离。这些值可以使用像素(px)、百分比(%)或其他长度单位。

与 2D 变换中的 translate() 函数相比，translate3d() 增加了 z 轴方向的移动能力，这对于创建逼真的 3D 效果至关重要。例如，可以通过调整 z 轴值来使元素看起来更近或更远，从而增强页面的深度感。

translate3d() 函数通常与 transform 属性一起使用，可以与其他变换函数（如 rotate3d()、scale3d() 等）组合，创造出更加丰富的视觉效果。需要注意的是，为了使 3D 变换正常工作，通常还需要设置 transform-style: preserve-3d 和 perspective 属性。

在现代浏览器中，translate3d() 函数得到了广泛支持，包括 Chrome、Firefox、Safari 和 Edge 等主流浏览器。自 2015 年 7 月以来，该功能已在所有主要浏览器中可用，使其成为创建现代网页 3D 效果的可靠选择。