跨度元素忽略 TranslateZ()

Question

span元素；下面代码段中 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>

跨度元素忽略 TranslateZ()

TranslateZ() is ignored for span element

html

css

3d

css-animations

css-transforms