css3d覆盖问题，z-index失效

Question

css3d层级覆盖问题

现在底面把左边和右边覆盖了，我希望底面在最底层

<div className="cube">
        <div className="face bottom">123</div>
        <div className="face left">123</div>
        <div className="face right">123</div>
      </div>

.cube {
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg) translateX(570px) translateY(30px);
  font-size: xx-small;
}

.cube .face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #000;
  z-index: 1;
}

.cube .bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

.cube .left {
  background-color: blue;
  transform: translateZ(-100px);
}

.cube .right {
  background-color: red;
  transform: rotateY(-90deg) translateZ(-100px);
}

Answer 1

.cube {
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform: rotateX(-45deg) rotateY(-45deg) translateX(570px) translateY(30px);
    font-size: xx-small;
}

.cube .left {
    background-color: blue;
    transform: translateZ(100px);
}