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 google.com 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


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 {
transform:rotate(360deg);
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.

Filed under 

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)

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.
By submitting this form, you accept the Mollom privacy policy.

About the Author