See the Code - See it Full Page - See Details
Four nested divs with the same 3D rotation behave very differently based on one property: `transform-style`. This demo shows all nested elements having `flat` vs all nested elements having `preserve-3d`. Different results will happen when some have `flat` and others have `preserve-3d`. When a nested element has `transform-style: flat`, it will be flattened into the 3D space of its parent and not occupy its own 3D space. That's why in the example the two outer/red circles are doing the same animation but each element nested within is doing its 3D rotation in a way that appears flat on the surface of the outer div. When a nested element has `transform-style: preserve-3d` it will exist in the same 3D space as its parent. So with the 4 elements in this example each 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 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