跨度元素忽略 TranslateZ()

Question

span 元素；下面的 sn-p 中 div 元素的子元素行为异常。 span 元素的背景色设置为#0dd，其变换属性设置为scale( 0.5 ) translateZ( 5rem )。尊重比例值并将元素缩小到一半大小； 但是 translateZ 值被忽略并且不会改变元素的位置。

想要的结果是将span 元素从其父div 向前推开。 为什么此处忽略 translateZ，我们如何在 Z 方向翻译span？

* {
  box-sizing: border-box;
  transform-style: preserve-3d;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body, span {
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  perspective: 30rem;
}
section, div, span {
  position: absolute;
  width: 10rem;
  height: 10rem;
}
div, span {
  opacity: 0.5;
  background-color: #000;
}
div span {
  transform: scale( 0.5 ) translateZ( 5rem );
  background-color: #0dd;
}

<style>
  .rotate_y {
    animation-name: rotateY;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes rotateY {
    0% {
      transform: rotateY( 0deg );
    }
    100% {
      transform: rotateY( 360deg );
    }  
  }
</style>

<section class='rotate_y'>
  <div>
    <span></span>
  </div>
</section>

更新：似乎在 IOS 上表现正常。问题在于桌面 Chrome。

Answer 1

不透明度似乎是罪魁祸首，但不知道为什么。这可能是一个错误，所以请改用透明背景：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  margin: 0;
  perspective: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rotate_y * {
  display: block;
  background-color: rgba(0,0,0,0.5);
  width: 10rem;
  height: 10rem;
  transform-style: preserve-3d;
}

.rotate_y span {
  transform: scale( 0.5) translateZ( 5rem);
  background-color: rgba(0,221,221,0.5);
}

.rotate_y {
  transform-style: preserve-3d;
  animation-name: rotateY;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotateY {
  0% {
    transform: rotateY( 0deg);
  }
  100% {
    transform: rotateY( 360deg);
  }
}

<section class='rotate_y'>
  <div>
    <span></span>
  </div>
</section>