How To Do A Barrel Roll?

By now, you might have seen Google’s page do a barrel roll. If not, head over to google.com and type “Do a barrel roll.”

Using Internet Explorer? Unfortunately, no tricks for you—I’d recommend trying Chrome.

For those who can, you’ll see Google’s page spin around right in front of you. If you wondered how that effect works or assumed it involved Flash, I’m here to explain: it’s actually done with simple CSS.

Step 1: Creating the Animation with CSS3

The spinning effect is achieved using CSS keyframes. Here’s how it’s written:

@-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: Applying the Animation to the Page

Next, we apply the animation to the body of the page like this:

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

Since this is a newer feature, vendor prefixes are still necessary to ensure it works in different browsers. 

What’s surprising is how little code is required for this effect. If the page were only designed for WebKit browsers, the effect could be done with just two lines of code:

body {
  transform: rotate(360deg);
  transition: 4s rotate;
}

Eventually, when all browsers adopt these standards (or IE becomes obsolete), effects like this will be even easier to implement.

While it may not work universally just yet, it’s a fun trick for those using modern browsers.