如何实现堆叠图片的Z轴动画？解决translateZ未达预期问题

你的问题出在两个核心点：

• z-index破坏3D空间层级：给.img.a和.img.b设置的z-index会强制浏览器按二维堆叠规则渲染元素，完全忽略translateZ带来的3D深度，导致Z轴间距效果失效。
• 初始状态与动画的translateZ值不一致：.img.b初始transform是translateZ(200px)，但动画里是translateZ(400px)，状态冲突会引发渲染异常。

修改后的完整代码 #

CSS部分

body {
  margin: 0;
  padding: 0;
}

main {
  position: relative;
  min-height: 100vh;
}

.scene2 {
  position: relative;
  min-height: 100vh;
  /* 调小透视值，增强3D深度感知 */
  perspective: 800px;
}

.wrap {
  height: 100vh;
  transform-style: preserve-3d;
}

.img {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  object-fit: cover;
  object-position: center;
  transition: transform 5s ease-in-out;
}

.img.a {
  /* 移除z-index，让3D空间决定层级 */
  width: 500px;
  height: 300px;
  transform: translateZ(100px) rotateY(0deg);
  animation: 5s infinite rotate_a;
}

.img.b {
  /* 移除z-index，统一translateZ值为400px */
  width: 200px;
  height: 200px;
  transform: translateZ(400px) rotateY(0deg);
  animation: 5s infinite rotate_b;
}

@keyframes rotate_a {
  from {
    transform: translateZ(100px) rotateY(0deg);
  }
  to {
    transform: translateZ(100px) rotateY(360deg);
  }
}
@keyframes rotate_b {
  from {
    transform: translateZ(400px) rotateY(0deg);
  }
  to {
    transform: translateZ(400px) rotateY(360deg);
  }
}

HTML部分（无需改动）

<main>
  <div class="scene2">
    <div class="wrap"> 
      <img class="img a" src="https://i.imgur.com/tXtwrPd.jpeg" alt="">
      <img class="img b" src="https://i.imgur.com/IVyU5Im.jpeg" alt="">
    </div>
  </div>
</main>

关键改动说明 #

1. 移除z-index：让元素的前后层级完全由translateZ值决定，值越大的元素越靠近屏幕。
2. 统一translateZ值：保证.img.b的初始状态和动画状态深度一致，避免渲染冲突。
3. 调整perspective值：从1200px改为800px，增强透视效果，让Z轴的间距感更直观。

修改后，两张图片旋转时会清晰呈现Z轴空隙，.img.b会明显更靠近观察者。

内容的提问来源于stack exchange，提问作者Nick