translate3d() - 3D 平移

语法说明

transform: translate3d(x, y, z);

• x - X 轴偏移量（左右）
• y - Y 轴偏移量（上下）
• z - Z 轴偏移量（前后，需要透视才能看到效果）
• 正 Z 值：向前移动（靠近观察者）
• 负 Z 值：向后移动（远离观察者）
• 等价于 translateX() translateY() translateZ()

示例 1：Z 轴移动（前后）

需要配合 perspective 才能看到 Z 轴的效果

.forward {
  transform: translateZ(100px);
  /* 向前移动，元素变大 */
}

.backward {
  transform: translateZ(-100px);
  /* 向后移动，元素变小 */
}

示例 2：3D 空间移动

同时在 X、Y、Z 三个方向移动

.box {
  transform: translate3d(100px, 50px, 100px);
  /* 右移 100px，下移 50px，前移 100px */
}

示例 3：3D 立方体

使用 translate3d 创建 3D 立方体效果