css3d覆盖问题，z-index失效

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

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

【相关推荐】

• 文章：css z-index 的使用 中也许有你想要的答案，请看下吧
• 除此之外, 这篇博客: CSS3详解中的 图层z-index 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  .tipText{
      z-index: 999;/*这里的意思是图层第999层，默认0，最高无限*/
      color: black;
  }
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^