THIS COMPLEX ANIMATION WORKS VERY NICELY in Firefox and Chrome, though only Chrome gets the rotation direction right (Firefox reverses it). Safari 5 has more trouble with the rotation, making some meridians rotate clockwise and others counter-clockwise on a seemingly random basis (see the code to see which ones). Internet Explorer before IE9 does not support transform3d, and perspective is not supported before IE10. See the source for the mess of vendor-specific prefixes needed to support older browser versions. Sorry, but I’ve not included support for Opera, but it should work with the proper prefixes.

Setting up the meridian lines wasn’t too difficult, but positioning the lines of latitude proved to be unexpectedly tricky, requiring some rather intricate trigonometric calculations. Basically, this involved finding the exact margin-top values needed to place each line so that it appears to be tangent to the surface of the globe. The formula is:

3D transforms are fun, but a problem arises from the fact that html elements have zero thickness in the z-axis, which means they disappear when they are viewed “edge-on”. It would be nice if there were a thickness CSS property to go along with width and height.

This demo uses a simple javascript to toggle the animation on and off. The script adds or removes a “paused” class to the animated elements which gives it the CSS property animation-play-state:paused;.