父元素旋转时，如何让子元素呈现正确的3D弹出效果？

你设置了带旋转动画的.rotator--element父元素，内部子元素.pop-out-item通过transform: translateZ(500px)试图实现3D弹出效果，但实际子元素始终紧贴旋转的父元素，未达到预期的3D突出效果（示意图效果：橙色方块从红色方块表面向外突出，随父元素旋转时保持空间位置）。

原代码如下：

CSS #

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

.rotator {
  position: relative;
  perspective: 500px;
}

.rotator--element {
  display: block;
  width: 300px;
  background: red;
  aspect-ratio: 1/ 1;
  animation: spin 10s infinite;
}

.pop-out-item{
  width: 50px;
  aspect-ratio: 1 / 1;
  background: orange;
  transform: translateZ(500px);
  transform-style: preserve-3d;
}

body{
  padding: 60px;
}

HTML #

<div class="rotator">
  <div class="rotator--element">
    <div class="pop-out-item"></div>
  </div>
</div>

错误原因 #

核心问题是父元素未开启3D空间上下文：

• transform-style: preserve-3d属性需要设置在包含3D变换子元素的父元素上，目的是让父元素保留3D空间，使子元素的3D变换能在这个空间中生效。你错误地将该属性加在了子元素上，导致子元素的3D变换被扁平化，translateZ效果无法正确渲染，看起来就像紧贴父元素。

修正方案 #

修改两处CSS：

1. 给.rotator--element添加transform-style: preserve-3d，开启父元素的3D空间
2. 移除子元素.pop-out-item上的transform-style: preserve-3d（该属性对子元素无意义）

修正后的CSS代码：

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

.rotator {
  position: relative;
  perspective: 500px;
}

.rotator--element {
  display: block;
  width: 300px;
  background: red;
  aspect-ratio: 1/ 1;
  animation: spin 10s infinite;
  transform-style: preserve-3d; /* 新增：开启父元素3D空间 */
}

.pop-out-item{
  width: 50px;
  aspect-ratio: 1 / 1;
  background: orange;
  transform: translateZ(500px);
  /* 移除：transform-style: preserve-3d */
}

body{
  padding: 60px;
}

修正后，子元素的translateZ(500px)会在父元素的3D空间中生效，当父元素旋转时，子元素会呈现出从父元素表面向外突出的3D效果，符合你的预期。

内容的提问来源于stack exchange，提问作者Djave