We have all seen Google’s barrel roll trick. The coolest thing about it is that, its done with simple CSS. To see the same effect, place your mouse over this blog post.
Source code for the Barrel roll:
.barrel_roll { -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; } @-moz-keyframes roll { 100% { -moz-transform: rotate(360deg); } } @-o-keyframes roll { 100% { -o-transform: rotate(360deg); } } @-webkit-keyframes roll { 100% { -webkit-transform: rotate(360deg); } }
Only works in modern browsers like Chrome, Firefox, Opera and Safari. I hope IE will catch up.
Source: http://www.metaltoad.com/blog/how-does-google-do-barrel-roll