RSS
 

How to do a barrell roll

06 Nov

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

 
 

Tags: , ,

  • Arindam

    jst awsm……

  • Sekhar Dhill

    Amazing

 
Premium Wordpress Plugin