Rubics cube in your browser

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.

Chrome, complete with Javascript engine, allows the Cube to be twisted on any device. HTML5 & CSS3 allows the style to appear 3D and help make the Cube motions fluid. Three.js 3D-library allows the cube to be rendered in real time. Here is the Rubik’s Cube from Google:


Be the first to post a comment.

Leave a Comment

Your email address will not be published. Required fields are marked *