Wednesday, May 16, 2012

Make any Web page to “Do a Barrel Roll” like Google

6:21 AM  ,  


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


First create a new html document with the standard <head> and <body> tags. Then add an iframe in the document, specifying the webpage URL you wish to apply the effect to between the <body>...<body> tags:

<iframe src="http://sumtips.com"/>

Next is the CSS3 for the effect. You can either add it in the same page, by including it inside the<head> tags, or import it as an external file. The demo, at the end of the page has the CSS3 in the same page.

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