Nested child won't be preserved in 3D space

[Shikkediel]

I just can’t figure this one out… the demo below has multiple levels of nested elements with transforms applied. They all work together by using preserve-3d. But for some reason this won’t be applied to the deepest nested pseudo element inside the first .face child of the .inner elements.

Clicking on the center element with black background and grey shape will lead one to the parent containing the pseudo.

This gray shape (the pseudo) is supposed to be pointing inward (it’s rotated by 45 degrees around the vertical axis) but as you can see by using the slider, it’s projected onto the flat plain of its parent. Second time I come across it and unable to solve.

Why is this happening?

codepen.io/anon/pen/KEMzmo

The pseudo doesn’t have preserve-3d (supposedly not needed) so that for one doesn’t clear the issue.

[Shikkediel]

One more thing I tried – adding transforms to all relevant parent elements (just like the pseudos that are children of the other .face div items have) but that has no effect either. I thought “breaking the chain” of transforms might be a factor, since the front pentagon is the only one that’s actually not transformed…

Edit – trying to reduce the code, for starters there is only one .inner element now.

[Shikkediel]

I figured it out by completely reducing the demo… clip-path breaks 3D space.

[Author]

Posts