So I’m sure by now you’ve heard of Google’s latest Easter egg: type in “do a barrel roll” or “z or r twice” in Google, and the page will roll around. It’s an obvious nod to Star Fox 64. Want to know how this trick works?

Do a Barrel Roll!

Sometimes Google gets playful when you search for certain things. Search for “recursion,” and it asks, “Did you mean recursion?” Search for “ascii art,” and Google’s logo will change into colorful ASCII text. Google’s latest trick is to do a barrel roll. When you search for “do a barrel roll” or “z or r twice,” the Google page rolls around, doing a “barrel roll” so to speak. This trick works in Firefox, Chrome, and Safari (but not Internet Explorer).

So how did Google do the barrel roll effect? This trick is made possible with CSS animations and CSS transforms. CSS transforms is used to rotate, translate, scale, or skew HTML. CSS animations is used to animate HTML from a sequence of states. Put them together, and you can animate the rotation of a webpage.

These are CSS3 features that are still in the experimental stage, so the browsers that support them require vendor prefixes to use them. CSS transforms is widely supported, but CSS animations isn’t yet supported in Opera and Internet Explorer. Here’s a breakdown of browser support based on version:

How it Works

Let’s take a look at the CSS that Google used to make this effect happen. If you’re familiar with Firebug or Chrome/Safari Developer Tools, you can find this CSS yourself. After making Google do a barrel roll, pop open the developer tool (try pressing F12 in your browser) and inspect the <body> tag. Here’s what it looks like in Chrome:

Google's CSS magic is revealed under the hood.

Notice the -animation- CSS properties defined for the tag. If you search for “keyframe” in the Dev Tools Window, you’ll find the rest of the CSS. Here is the CSS code in its entirety:

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;
}

@-moz-keyframes roll {
    100% { -moz-transform: rotate(360deg); }
}

@-o-keyframes roll {
    100% { -o-transform: rotate(360deg); }
}

@-webkit-keyframes roll {
    100% { -webkit-transform: rotate(360deg); }
}

You can see the three vendor prefixes for Firefox (-moz-), Chrome/Safari/iOS/Android (-webkit-), and Opera (-o-). However, since Opera doesn’t support CSS animations, the Opera-specific lines of code aren’t needed (since they don’t do anything). Let’s fix that:

body {
    -moz-animation-name:roll;
    -moz-animation-duration:4s;
    -moz-animation-iteration-count:1;
    -webkit-animation-name:roll;
    -webkit-animation-duration:4s;
    -webkit-animation-iteration-count:1;
}

@-moz-keyframes roll {
    100% { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes roll {
    100% { -webkit-transform: rotate(360deg); }
}

The CSS defines an animation called “roll” that should animate for “4s” (4 seconds) and execute “1″ time. The “roll” animation consists of a single keyframe, which rotates the page by 360 degrees. The percentage value specifies the sequence order in which the keyframe should occur. “100%” occurs the end of the sequence, and lesser values would occur at earlier parts of the sequence.

Here’s a jsFiddle you can play with to see the effect in action: (Press the play button to see the effect again, and press the + button to edit the fiddle.)

If you’re wondering what’s the right syntax for adding extra keyframes, here’s an example of that (I just added more rotations):

Try it Another Way

Google used CSS animations to animate the rotation effect, but there’s an even easier way of doing it that’s more compatible across browsers. It’s called CSS transitions. CSS transitions let you transition HTML between two different states. Think of it as a simpler form of CSS animations. While CSS animations let you define many states in a sequence, CSS transitions define a sequence with just a “before” and an “after” state.

Here’s the barrel roll effect done using CSS transitions:

body {
    -moz-transition:4s all ease;
    -webkit-transition:4s all ease;
}

.roll {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

The transition property defines how long you want the transition to last (4 seconds), what properties should be transitioned (all of them), and which timing function to use (the ease function). I defined a class called “roll” that defines the state that the page will transition to. Just like before, it instructs the browser to rotate the page 360 degrees. If I defined more properties here (margin, padding, font-size, etc.), those would be animated as well, since I specified that “all” properties should be transitioned.

One drawback for this technique is that something needs to set the HTML to the new state; that is, something has to add the “roll” class to the <body>. The page needs to start in its initial state, and then it needs to be set to the transitioned state in order for the transition to occur. Thankfully, this is really easy to do; let’s use jQuery to solve this problem:

$(document).ready(function() {
    $('body').addClass('roll');
});

After the page loads, the <body> gets a “roll” class, which triggers the transition.

One more thing: CSS transitions is more widely supported than CSS animations.

So, we can make this work in more browsers:

body {
    -webkit-transition:4s all ease;
    -moz-transition:4s all ease;
    -o-transition:4s all ease;
    -ms-transition:4s all ease;
    transition:4s all ease;
}

.roll {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}

Now this will work in Opera and IE10. Here’s a fiddle of this code in action:

So now you know how to do a barrel roll in CSS!