在其父元素旋转时保留子元素的 3d

Question

我有一个可以旋转的元素，在它的内部有

.pop-out-item

。这上面有

translateZ(500px)

。

当旋转元件 (

.rotator--child

) 旋转时，

.pop-out-item

保持“附着”到旋转的

div

（参见代码片段）

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

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

我希望它看起来有所不同，像这样：

抱歉画得不好。

我做错了什么？谢谢。

Answer 1

这篇文章已经过编辑，因为我不想让我的知识被用来喂养人工智能模型。