Streaming live at 10am (PST)

Isometric animation using parent perspective


#1

Hi, everyone,

I ran into a problem where I’m trying to create an isometric illustration using parent perspective and I was able to get the effect right, however when I’m trying to move any of the child elements on their z-axis I’m unable to do it (elements move on X and Y axis though). Any idea what did I miss.? Sharing a preview link with you. Help is much appreciated.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @Lukas

Have you tried ‘rotating’ it rather than ‘moving’ it (move/rotate/skew panel) - and maybe changing the child perspective/Z-index element too?

It’s not something i’ve used often enough to advise, but that might help?

This might be useful too:


#3

I can do everything except for moving children elements on the z-axis and I can’t figure out why.


#4

Hello @Lukas,

I’ve been looking your read only. I was able to make it work.
I hope the way I will describe it will not be too confusing and help you make sens of 3D.

Every time you enable children perspective on an element you can see it as creating a 3D space and all of the children will be positioned inside this space.

So just set children perspective to 9999px (close to isometric) on your illustration-parent element and only this one. All the element inside this will be now in a 3d space and the illustration-parent would be sort of a window / viewport of this 3d space so try not to apply transforms to it as it won’t be in 3D.

You can then apply you rotation transforms on the screen element to put it in a isometric fashion. Finally you can move around all the children elements of screen element and they will always share the same 3d space coordinates.

I hope it helps. Don’t hesitate to ask if you need further demonstrations or explanations for this.

Max


#5

Thanks for the explanation @Maximosaurus. I believe that I set up everything the way you described (only ‘illustration-parent’ has children perspective set to 9999px and ‘screen’ has the rotational transforms),however I’m still only able to move the direct child elements of ‘screen’ container on their z-axis, not their descendants. Any way to have all child elements(two, three levels deep) to adhere to the same 3D space.? Not sure if I missed something from your explanation. Any idea.? Here’s the preview link - https://preview.webflow.com/preview/rukasu?preview=313ddbc5be15805136468f9662a293ca

Thanks!


#6

Hi @Lukas,

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.

Max


#7

Thanks for the quick reply, @Maximosaurus. I was able to make the ‘screen half’ ‘left’ to work correctly using your instructions (all child elements now move on z-axis), however doing the same thing for the other half (‘screen half’ ‘right’) doesn’t seem to have the same effect as the iPhone container or its child elements don’t move on the z-axis. I believe that I’m one or two clicks away from getting this right, but wasn’t able to make it work on my own. Any suggestions.?

EDIT: I was able to solve this by changing class names around, must’ve been some conflict between ‘screen half’ class containers. Anyway, massive thanks for your help @Maximosaurus.!