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.
