Rubic’s Cube had it’s 40th Anniversary this week. Although the Rubik’s Cube reached its height of mainstream popularity in the 1980s (from where I remember it most), it is still widely known and used. Since then it’s sold over 350 million units, making it the best-selling toy ever. Rubik’s Cube is a hard task to solve, thus some modern time hackers have built even smart phone powered LEGO devices that can solve it.
In honor of the 40th anniversary of the Rubik’s Cube, Google adorned its Doodle space with an interactive version of the insanity-inducing puzzle: Google put an impressive simple browser-based Rubic’s Cube Doodle game up on its homepage. Built thanks to advances in CSS and a few smart design tricks, it’s one of the most challenging doodles the company has done so far.
The widespread support for CSS 3-D Transforms on most browsers meant the team could build the cube in a way that was playable for most users: CSS 3-D Transforms lets us display the cube in a 3-D space. It is quite amazing that can be done with those transformations. I have earlier written on using CSS3 for video effects.