Can't control the 3D layers of an object

I have a few layers that I want to animate, as part of a 3D experiment. It works so far.

But if you have a look at the animation, what you see is that the left thumb keeps underneath that card. If you look closer in the Designer it turns out, that no matter how I control the layers of the left hand, they always end up to be one plane.

In opposition you can see, that having different layers of the right hand (see thumb) clearly works.

What am I doing wrong here?

Thanks a lot for some feedback on this. :slight_smile:

https://edding-tech.webflow.io/

https://preview.webflow.com/preview/edding-tech?utm_medium=preview_link&utm_source=dashboard&utm_content=edding-tech&preview=4d420aef2549a37ced0bb234e5e0773a&mode=preview

I made a quick video to demonstrate the problem:
https://vimeo.com/348590559/1468b9b4c9

CSS 3D is fake 3D. There is absolutely no 3D space, only a deformation of elements and a z order on the z axis for siblings only.

If the phone and the thumb are in the same group, and the card belongs to a sibling of this group, then if the card is on top of the phone, it’s also on top of the thumb.

Make the thumb group a sibling of the phone group and the card group and rework from there.

1 Like

Thanks @vincent that seems like a solution (that I will try).

Nevertheless I’m afraid you answer is not completely conclusive, because on the left hand (where the elements are grouped the same way), I don’t have the problem. In fact you can see the phone go between the elements of the left group.

Furthermore, what makes me wonder even more: How’s it possible that it reacts as intended in the Designer mode, but doesn’t do the same in the preview mode? I tried to capture that in my video.

So, thanks so far, but can you elaborate a little further on these two questions? Just out of interest. Thanks! :smile: