Doing it with style
.. and how it should be done. A version using 'transform-style: preserve-3d;' which makes the modelling so much easier and allows a full 360 degree rotation.
Compare this with the previous two demonstrations to see that this is much smoother and and rendered perfectly in all but IE. This uses child elements with 3D rendering and just one animation to rotate all the elements about the same axis.
Firefox is also way behind Chrome Safari and Opera when it comes to smoothness of rendering and animating 'preserve 3D' models.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.