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
.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
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
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.