cool tech graphics

How does Google do a barrel roll?

By now you've probably seen Google "do a barrel roll". If you haven't, head over to and enter "Do a barrel roll". What? You're using IE? Ok, well then no tricks for you. I suggest Chrome. For the rest of us, Google's page does a nice little in-place spin. When you saw it you may have thought "How the heck did they pull that off?" or maybe you said "Since when does google use flash?" or possibly "I feel the need... ...the need for speed!". The answer to the first question is easy. I'll show you how they did it:

Step 1: Create an animation in css3
@-moz-keyframes roll {
100% {
-moz-transform: rotate(360deg);
@-o-keyframes roll {
100% {
-o-transform: rotate(360deg);
@-webkit-keyframes roll {
100% {
-webkit-transform: rotate(360deg);

Step 2: Apply to the 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;

This is fairly cutting edge, so we still have to use the vendor prefixes, but the code is pretty straight forward. What's surprising is how little of it they needed. If this were a webkit only app, they could have done it with two lines of code using a transition. You never know though, the webkit standard could end up becoming a standard and this will be as easy as this:

body {
transition: 4s rotate;

Someday, IE will adopt the standards (or die) and we'll all be able to see fun stuff like this. Since IE doesn't support this, it may not be something we can implement across the board yet, but for a little bit of fun on 'modern browsers' it's great.

Date posted: November 3, 2011


Didn't know about that one. Pretty cool. You can also search for the words "tilt" and "askew" on google to get some subtle transform action... -webkit-transform: rotate(1deg)

What's an IE user to do? How can Google do this? Does this mean I need to migrate away from IE 5.5 for the Mac?

Dude, it's not called migrating it's called evolution! Do you still chase down a buffalo or go to the supermarket?! It's the same thing..

I just couldn't resist the urge of coding it. It is available at my sandbox, drop a few lines here to see the project approved for a full release!

Cool trick! I only got to see it just now. :) I've pretty much given up on IE a long time ago, it just doesn't offer the things that Google Chrome can. And Chrome rarely has any bugs which is the main reason why I use it now.


Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

Have questions?