html - CSS 3d 正确排序立方体绘图顺序

Question

所以我一直在摆弄 css，但我遇到了一个问题。这是我的代码:

.cube {
  position: absolute;
  width: 60px;
  height: 60px;
  transform-style: preserve-3d;
}

.scene {
  transform-style: preserve-3d;
}

.side {
  position: absolute;
  width: 60px;
  height: 60px;
}

.back {
  background-color: #ee5500;
  transform: translateZ(-30px);
}

.right {
  background-color: #ff8800;
  transform: translateX(30px) rotateY(90deg);
}

.top {
  background-color: #ffaa00;
  transform: translateY(-30px) rotateX(90deg);
}

.c1 {
  position: absolute;
  transform: rotateX(45deg) rotateY(45deg) translateY(0px);
}

.c2 {
  position: absolute;
  transform: rotateX(45deg) rotateY(45deg) translateY(60px) translateZ(0) translateX(0px);
}

<div class="scene">
  <div class="cube c2">
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side top"></div>
  </div>
  <div class="cube c1">
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side top"></div>
  </div>
</div>

https://codepen.io/qwertyquerty/pen/NyBZNd

所以我想要完成的是让 c2 出现在 c1 的后面，就好像它的顶部连接到 c1 的底部一样。由于某种原因，c2 显示在 c1 前面，这不是我想要的。我似乎无法解决这个问题，我尝试了很多东西，包括 z-index。有帮助吗？

Answer 1

我不得不承认，我不知道原因，但问题出在场景中的 transform-style 上:

.cube {
  position: absolute;
  width: 60px;
  height: 60px;
  transform-style: preserve-3d;
}

.scene {
  /*transform-style: preserve-3d; */
}

.side {
  position: absolute;
  width: 60px;
  height: 60px;
}

.back {
  background-color: #ee5500;
  transform: translateZ(-30px);
}

.right {
  background-color: #ff8800;
  transform: translateX(30px) rotateY(90deg);
}

.top {
  background-color: #ffaa00;
  transform: translateY(-30px) rotateX(90deg);
}

.c1 {
  position: absolute;
  transform: rotateX(45deg) rotateY(45deg) translateY(0px);
}

.c2 {
  position: absolute;
  transform: rotateX(45deg) rotateY(45deg) translateY(60px) translateZ(0) translateX(0px);
}

<div class="scene">
  <div class="cube c2">
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side top"></div>
  </div>
  <div class="cube c1">
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side top"></div>
  </div>
</div>