Preserve 3d of child element, as its parent spins - html

Question

I have an element that rotates, and inside of it I have .pop-out-item. This has translateZ(500px) on it.
When the rotating element (.rotator--child) spins, the .pop-out-item stays "attached" to the rotating div (see code snippet)
#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>
I expect it to look different, something like this:
Sorry for terrible drawing.
What am I doing wrong? Thanks.

Answer 1

I assume what you want is for the orange square to move with the red one, but translated. I moved the transform-style: preserve-3d to the red rotator--element and made the translateZ value 50px as it's easier to see that way. As the transform-style MDN documentation states:
The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.
#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;
}
.pop-out-item{
width: 50px;
aspect-ratio: 1 / 1;
background: orange;
transform: translateZ(50px);
}
body{
padding: 60px;
}
<div class="rotator">
<div class="rotator--element">
<div class="pop-out-item"></div>
</div>
</div>