CSS 的 transform 有 translate、rotate、scale 等方法，其中 translate 又分为 translateX、translateY、translateZ 三种方式，但是当我们想实现更加复杂的 3D 动画效果时，使用 translateZ 似乎已经不能满足需求了。这时候就要用到 translate3D，具体用法如下：
transform: translate3D(x,y,z);
其中 x、y、z 分别代表三个轴的移动距离。与 translate 相比，translate3D 可以更方便地进行复杂的 3D 变换操作。
而在 JavaScript 中，我们可以通过直接设置元素的 style 属性来实现实时动态效果。
element.style.transform = "translate3D("+x+"px,"+y+"px,"+z+"px)";
其中 x、y、z 是通过计算得到的距离。这种方式适用于实时的按照某个条件进行元素的移动操作。
除了单纯的移动之外，translate3D 还可以与其他 transform 方法进行组合，从而实现更加复杂的 3D 动画效果。比如：
transform: rotateY(90deg) translate3D(100px,0);
