How to Do A Barrel Roll, Google Style.

by Rob Cullen

So it seems a lot of people are starting to realise the potential of the modern browser. None more so than the millions of people "Tweeting" about how fantastic and amazing Googles - Do a barrel roll search is.

If you have not already seen what happens, you need a modern browser, Firefox, Chrome, IE9 or similar. Type in your Google search box "Do a barrel roll" and watch as google turns the whole page 360 degrees. Pretty impressive. So how did Google make the screen rotate 360 degrees?

We this is a very short and simple tutorial of how you can make your own website turn 360 degrees.

Here is an example of how I got Digital Park to Barrel Roll: Do a Barrel Roll

First we need to create and iFrame:

<iframe src="http://digitalpark.co.uk/"  />

Next we need some kick ass styling:

@-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;

}



html, body, div, iframe { margin:0; padding:0; height:100%; overflow:hidden;}

iframe {width:100%; border:0; }

Add this styling code to your website and your finished, go and do a barrel roll.