As a web guy I was intrigued by today’s Google easter egg. If you haven’t heard, go to Google and search for “Do a barrel roll”. If you’re using a decent browser, the entire page will do fun things.
How do they do it? I jumped into the source to see. It’s a simple CSS transition:
@-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } } @-o-keyframes roll { 100% { -o-transform: rotate(360deg); } } @-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } } body{ border: 1px solid #000; -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; }Nice and easy, eh? Now go play with this fiddle.