CSS Scroll Perspective on Nested Elements - html

Question

The following code produces a perspective effect that changes the angle you are looking at the element, as you scroll:
<div class="parent">
<div class="box"/> </div>
<div class="box"/> </div>
<div class="box"/> </div
</div>
* {
height: 100%;
overflow: hidden;
}
.nesting {
height: 3000px;
}
.parent {
overflow: scroll;
perspective: 200px;
height: 100vh;
}
.box {
width: 100px; height: 100px;
margin: 100px auto;
border: 5px solid black;
transform: rotateX(50deg);
}
Codepen: https://codepen.io/Davste93/pen/ZEydJeK
However this is not very practical for real-world situations, because the moment you add an element in between the parent and transformed element (see: nesting), it breaks:
<div class="parent">
<div class="nesting">
<div class="box"/> </div>
<div class="box"/> </div>
<div class="box"/> </div>
</div>
</div>
Isn't this what preserve-3d, is meant to do? Nothing seems to work.
Is there a way to get CSS perspective animations to work on scroll with elements in between?
I know I can achieve the same effect with perspective-origin and javascript, but I would like to keep this in pure CSS if possible.

Answer 1

I found out a few things on this journey:
overflow: hidden breaks perspective, even when there's preserve-3d
preserve-3d is needed on any nested elements
Angular components (unless they have display: block) do not pass down perspective.
Working example:
<div class="parent">
<div class="nesting">
<div class="box"/> </div>
<div class="box"/> </div>
<div class="box"/> </div>
<div class="box"/> </div>
<div class="box"/> </div>
<div class="box"/> </div>
</div>
</div>
* {
height: 100%;
}
html {
overflow: hidden;
}
.nesting {
transform-style: preserve-3d;
}
.parent {
overflow: scroll;
perspective: 200px;
height: 100vh;
}
.box {
width: 100px; height: 100px;
margin: 100px auto;
border: 5px solid black;
transform: rotateX(50deg);
}
https://codepen.io/Davste93/pen/jOwjxOP