CSS3 Flipping Cube
A very cool CSS3 experiment by Eystein Alnaes. The cube is made up of two faces (i.e. two divs with classes .flippety and .flop) which are positioned correctly using transforms and rotations. The cube is made 3D by using preserve-3d transformation style and this only works in webkit browsers. A perspective of 1000px is given to make the whole viewport a 3D space.
When the cube is hovered, it is made to rotate in 3D space by using rotateX transform property and this rotation is animated using the CSS3 transitions. The whole experiment will work only in webkit browsers and if you don't have Chrome or Safari installed, here's a quick video demonstrating the experiment. You can take a look at the code to get a better understanding.