Google Search does a barrel roll

November 3, 2011

If you haven’t already, go to Google Search, type in “do a barrel roll” and see what happens (the link for the lazy is here). Pretty neat, huh?

You might ask: “How did they do that?” The answer is actually quite simple. CSS3. Yes, they made their page rotate a full 360 degrees by using little more than some very simple CSS. Here’s the actual CSS that they used:
body {
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-o-animation-name: roll;
-o-animation-duration: 4s;
-o-animation-iteration-count: 1;
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
}

I’d say that’s a cool trick. All you have to do is type in a certain phrase, the Instant Search detects what you’re doing, activates a little bit of code to modify the CSS rules pertaining to the body tag, and suddenly the entire page is rotating around its central point.