translateZ() - Z 轴平移

语法说明

transform: translateZ(z);

• z - Z 轴方向的偏移量
• 正值：向前移动（靠近观察者），元素看起来更大
• 负值：向后移动（远离观察者），元素看起来更小
• 重要：必须在父元素上设置 perspective 才能看到效果

示例 1：基础 Z 轴移动

悬停方块查看 Z 轴移动效果

/* 父容器必须设置 perspective */
.container {
  perspective: 800px;
}

/* Z 轴移动 */
.box {
  transform: translateZ(0px);      /* 原位 */
}

.box:hover {
  transform: translateZ(150px);   /* 向前移动 */
}

.box-back {
  transform: translateZ(-100px);  /* 向后移动 */
}

示例 2：3D 层叠卡片

悬停查看卡片在 Z 轴上的层叠效果

.card-stack {
  transform-style: preserve-3d;
  transform: rotateY(-15deg) rotateX(10deg);  /* 旋转一下才能看到层叠 */
}

.card:nth-child(1) { transform: translateZ(0px); }
.card:nth-child(2) { transform: translateZ(-50px); }
.card:nth-child(3) { transform: translateZ(-100px); }

.card-stack:hover .card:nth-child(1) { transform: translateZ(100px); }
.card-stack:hover .card:nth-child(2) { transform: translateZ(50px); }
.card-stack:hover .card:nth-child(3) { transform: translateZ(0px); }

示例 3：3D 按钮效果

点击和悬停按钮查看 3D 效果

.btn-3d {
  transition: all 0.3s ease;
}

.btn-3d:hover {
  transform: translateZ(20px);
  box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4);
}

.btn-3d:active {
  transform: translateZ(5px);  /* 按下效果 */
}

示例 4：交互式演示

拖动滑块调整 translateZ 值