I think I got it,
First if you select your screen half (screen half - combo left) you will see that children perspective is set to none and the parameter is orange (inheriting). If you select the screen half without the combo (higher selector) it is blue so you can delete this useless style even if it doesn’t have a significant impact on the result as it is set to none and therefore inherit from illustration parent perspective.
Anyway the key solution to your problem there is the following:
Still with the higher selector screen half selected, the transform property is set to move 0px. If you remove this transform 0 you will be able to make all the children move in z space. It will work as well if you apply transforms other than 0 to this element.
It’s seem counter intuitive but I believe that when CSS is calculating the position of a child element in 3D, it’s looking at the parent transforms to deduce it. If there are set to 0 it’s like asking a result that would always be 0 (again I’m not specialist of the math behind ^^).
Anyway it should solve what you are trying to achieve. As a rule of thumb, I will always try to be sure not to set a CSS property that has no impact (i.e. move 0px).
I saw some exemple where animation need to be made and people setup transforms to something like 0.0001. This way you don’t have a significant visual difference but coordinates can be calculated properly.
This is the only things I changed in your project and I believe this is all that was preventing it to work.