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

我必须承认我不知道原因，但是问题是由场景上的转换风格引起的：

.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>