I know, I’m kind of late, but when I found out about Google’s “Do a Barrel Roll” just recently, I had to try this out myself and wanna blog about it.
(On a side note: seriously, how nerdy is it if you want to type “myself” but instead type “mysql”? Having to write this sentence was already a chore)
If you clicked the above link and if your browser is sort of up-to-date, you will have witnessed the Google website to spin about and stop again when at its original position. It did a barrel roll.
Now the interesting part is the actual techniques behind it as the whole thing is done via CSS. It makes use of two new things in CSS3: keyframes and animations.
I included the same example on my website, which will execute if called with barrel as a GET parameter: haraldkraft.de/?barrel (Repeat the process by clicking the barrel icon)
When you check the source code, you will find the inclusion of barrelrole.css, which containes the keyframes and animation rulesets for Webkit, Firefox and Opera (however, for me it’s not working in Opera, yet):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
@-webkit-keyframes barrelroll { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } @-o-keyframes barrelroll { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @-moz-keyframes barrelroll { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @keyframes barrelroll { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } body { -moz-animation-name: barrelroll; -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -o-animation-name: barrelroll; -o-animation-duration: 4s; -o-animation-iteration-count: 1; -webkit-animation-name: barrelroll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; } |
Once this CSS code is interpreted by the browser, it will spin the website (0-360 degrees) one time (iteration-count 1) over a period of 4 seconds (duration 4s).
