The latest Google Easter Egg, Do a Barrel Roll is fun! If you haven’t checked it out, click this link to see it in action. Barrel Roll animation makes a vast use of CSS3 properties like -moz-animation, -webkit-animation and @keyframes roll. The CSS snippet to create “do a Barrel Roll” effect is given below:

Do a Barrel Roll CSS Code

<style type="text/css">
@-webkit-keyframes roll {
  from { -webkit-transform: rotate(0deg) }
  to { -webkit-transform: rotate(360deg) }
}
@-moz-keyframes roll {
  from { -moz-transform: rotate(0deg) }
  to { -moz-transform: rotate(360deg) }
}
@keyframes roll {
  from { transform: rotate(0deg) }
  to   { transform: rotate(360deg) }
}
body {
  -moz-animation-name: roll;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: 1;
  -webkit-animation-name: roll;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 1;
}
</style>

You can put this CSS code in the <head> section of a basic HTML page to get a Barrel rolling effect.

Just like Google Barrel Roll, you can make any website to do a barrel roll. I just created a bookmarklet which makes any website or webpage to do a 360 degree spin. Click it to see our website doing a barrel roll:

Do a Barrel Roll Bookmarklet

You can drag and drop it to your Browser bookmarks and make use of it to make any website do a barrel roll animation. I hope you like it.