44

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?

Kara
  • 6,115
  • 16
  • 50
  • 57
wave
  • 1,740
  • 3
  • 15
  • 16

8 Answers8

22

If you look at the css code :

body {
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: 1;
    -moz-animation-name: roll;
}
Nicolas
  • 5,583
  • 1
  • 25
  • 37
  • 6
    where roll is something like @-webkit-keyframes roll { from { -webkit-transform: rotate(0); } to { -webkit-transform: rotate(360deg); } } – wave Nov 03 '11 at 18:58
  • 7
    Obnoxious JavaScript animations are dead! All hail obnoxious CSS animations! – Ansis Māliņš Nov 07 '11 at 13:40
16

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;
}
Drew McGowen
  • 11,471
  • 1
  • 31
  • 57
Leo
  • 370
  • 2
  • 6
3

It's a CSS Transition: https://developer.mozilla.org/en/CSS/CSS_transitions

-moz-transform: rotate(360deg);
-moz-transition-property: all;
-moz-transition-duration: 5s;

Example for Mozilla above, use -o and -webkit to target other browsers.

CassOnMars
  • 6,153
  • 2
  • 32
  • 47
2

It uses custom CSS animations. See the CSS rules applied to the <body> here:

body {
    -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;
}
BenM
  • 52,573
  • 26
  • 113
  • 168
1

sounds like a css3 rotation transformation applied to either the body or html tags

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
1

Add a link with something like that: 

javascript:(function(){var s=document.createElement('style');s.innerHTML='%40-moz-keyframes roll { 100%25 { -moz-transform: rotate(360deg); } } %40-o-keyframes roll { 100%25 { -o-transform: rotate(360deg); } } %40-webkit-keyframes roll { 100%25 { -webkit-transform: rotate(360deg); } } body{ -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; }';document.getElementsByTagName('head')[0].appendChild(s);}());
John Conde
  • 217,595
  • 99
  • 455
  • 496
vectorash
  • 11
  • 2
0

if you want infinite

 @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
 @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
 @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 body{-webkit-animation: spin 9.9s infinite linear;}
joshua pogi 28
  • 521
  • 1
  • 6
  • 15
0

This guy will do the trick on any webpage:

@-moz-keyframes roll {
    from { -moz-transform: rotate(0deg) }
    to   { -moz-transform: rotate(360deg) }
}
body {
    -moz-animation-name: roll;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: 1;
   }

Remember that this is for firefox.

defau1t
  • 10,593
  • 2
  • 35
  • 47