See the Code - See it Full Page - See Details
Visual Reference for how `transform-style` affects nested divs when each div uses `flat` versus `preserve-3d` as a value. Four nested divs with the same 3D rotation behave very differently based on this one property. Each circle is nested, and each circle is doing the same 3d rotation from `rotateX(0deg) rotateY(0deg) rotateZ(0deg)` to `rotateX(210deg) rotateY(130deg) rotateZ(-30deg)` Primary animation uses `preserve-3d` when the corresponding circle's toggle is selected in the top menu and `flat` when it is deselected. Reference animation (with 33% opacity) is with every `div` using `preserve-3d`. Deselect "Use Preserve-3d Reference" to make all the reference circles use `flat`. "Overlay Reference" toggle will switch the reference animation from happening on top of primary animation to a side by side view. When an element has `transform-style: flat`, its children will be flattened into its 3D space. When an element has `transform-style: preserve-3d` its children will coexist in the same 3D space as it does. So with the 4 elements in this example when all are set to `preserve-3d` and each is doing the same amounts of rotations, they build on each other. The second/blue div will be doing its rotation in the same space as its parent's, accounting for the parent's rotations, etc. Change the `start` and `end` values in the JS to vary the animation. To see a simpler version, try only rotating around 1 axis (e.g. set `end.rx = '180deg' and all other values to `0deg`)
This Pen uses: HTML, CSS, JavaScript, and