If you Google, 'do a barrel roll', the whole page does a 360 rotation. Does anyone have any guesses as to how Google is doing this? I disabled javascript, and it still occurred, so maybe a css rotation?
Do A Barrel Roll is an catchphrase used to instruct someone to perform a 360 degree horizontal spin. It is sometimes used to caption image macros where the subject appears to be in mid-rotation, or in animated GIFs where the subject is performing a full rotation.
It's a popular Google search trick released in 2011 and is still active today. To experience an authentic Google-style barrel roll, just type the words “do a barrel roll” into Google's search engine, hit enter, and watch your screen do a 360-degree turn! Classic.
do a barrel roll — Watch your screen spin out of control for a moment after searching, a reference to the classic Nintendo game Star Fox 64. You can also search for “Z or R twice” to the same effect (mimicking the action on a Nintendo controller). tilt — Make your search results page do just that.
If you don't see the barrel roll, you may have disabled animations in your browser settings. It's also possible you're using a browser add-on/extension that prevents CSS animations from loading.
If you look at the css code :
body {
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-moz-animation-name: roll;
}
As said above, with CSS3 animations and transform.
Wesbo showed a way to apply the effect on any site. You can view a demo and instruction here.
@-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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With