How does google do the barrel roll?

Question

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?

Answer 1

If you look at the css code :

body {
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: 1;
    -moz-animation-name: roll;
}

Answer 2

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