With some of the more advanced features of CSS3, you can animate objects on a whole new level. This video makes mention of the fact that only Safari and Chrome browsers currently support this kind of CSS transition. Although this was still true at the time Craig Pattenden made the tutorial, many updates have occurred since then and according to http://caniuse.com/css-transitions Firefox, iOS, Opera, Opera Mobile and Android have been added to the list of supported browsers.
By simply assigning a border radius to a box
<div>, we are able to change a box into a circle. In this example a moon is meant to orbit around the Earth and this requires a few divs to be created first. The Earth
<div> is positioned relatively with the orbit path and the moon divs being positioned as absolutely. The moon then must be attached to the orbit path. Once all your CSS positions are set you are ready to move on. There is obviously a bit of code involved in all of this, but here is the basic structure of the divs.
He does a really good job of breaking down in detail the CSS code for all of the positioning, so make sure you take a moment and look at that even though he spends a few minutes explaining the reasoning and mechanics of the orbit and rotation transitions being created. Transitions like this are incredibly slick and can change the way a page or website is perceived by the visitor.