8 Responses to “3 Second Amusement: Google “Do a Barrel Roll””

  1. The rotation is done differently in web browsers based on their capabilities. Most browsers use the CSS3 animation and transform methods. An example of this for Chrome and Safari is here:

    @-webkit-keyframes barrelroll {
    0% { -webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(360deg); }
    .rotateclass {
    -webkit-animation: barrelroll 2s 1;

  2. had it on my site for a bit

    add this to body tag

    -moz-animation-name: roll;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: 2;
    -webkit-animation-name: roll;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 2;


    make these

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

  3. Yah, I found a problem with it, too.

    When I click on the barrel, it doesn’t do a bloody thing.

    How do they do it? They put up a JPEG image and it just SITS THERE. Boy, that was easy.

    Tried it in three different browsers: IE8, Firefox 7 (and I thought maybe the NoScript was affecting it), and Google Chrome (which updates itself automatically, who knows what version it is).

    All three, I get bupkis.