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

我不得不承认我不知道原因，但问题来自现场的变换风格：

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;