html - 如何让 translateZ() 处理孙元素？

Question

我正在尝试使用 CSS 动画，但我不知道如何使用“.logo”类在 span 元素上“转换：translateZ(200px)”。

我想让“Z-Text”漂浮在“#box3”的黄色背景上，我应用了 preserve-3d 变换样式但没有任何效果.. translateX 和 Y 工作正常。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 400px;
  width: 400px;
  border: 1px solid white;
}

#outer-box {
  height: 100px;
  width: 100px;
  background-color: black;
  transform-style: preserve-3d;
  animation: spin 5s linear infinite;
}

#outer-box > div {
  position: absolute;
}

#box2 {
  height: 100px;
  width: 100px;
  top: -50px;
  background-color: green;
  transform: rotateX(0.25turn);
}

#box3 {
  height: 100px;
  width: 100px;
  background-color: yellow;
  top: 50px;
  opacity: 0.5;
  transform-style: preserve-3d;
  transform: rotateX(0.25turn);
  perspective: 1000px;
}

.logo {
  position: absolute;
  transform: translateZ(200px);
}

#box4 {
  height: 100px;
  width: 100px;
  left: 50px;
  background-color: blue;
  opacity: 0.5;
  transform: rotateY(0.25turn);
}

@keyframes spin {
  0% {
    transform: rotateY(0) rotateX(0deg);
  }
  50% {
    transform: rotateY(180deg) rotateX(180deg);
  }
  75% {
    transform: rotateY(270deg) rotateX(270deg);
  }
  100% {
    transform: rotateY(359deg) rotateX(359deg);
  }
}

 <div class="container">
        <div id="outer-box">
            <div id="box2">Any Text</div>
            <div id="box3">
                <span class="logo">Z-Text</span>
            </div>
            <div id="box4">Some Text</div>
        </div>
    </div>

有什么建议么？

标签： htmlcssanimation