- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
The pseudo doesn’t have preserve-3d
(supposedly not needed) so that for one doesn’t clear the issue.
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.
I figured it out by completely reducing the demo… clip-path
breaks 3D space.