Googleで「do a barrel roll」を検索すると画面が回転する

Googleのページで「do a barrel roll」と検索すると画面が1回転するみたいです。

Google検索で「do a barrel roll」と検索すると画面がぐるりん！ – ロケットニュース24（β）
http://rocketnews24.com/2011/11/04/149053/

このネタを聞いてすぐに以前にGIZMODEがエイプリルフールに行ったサイトへのいたずらを思い出しました。

GIZMODEのエイプリルフールネタに触発されてみた - 強火で進め
http://d.hatena.ne.jp/nakamura001/20100331/1270053064

解説

今回も恐らくはCSS 3を使った実装に違いないと当たりを付けて調査した所、やはり予想通りでした。

該当箇所はこちら(見やすい様に整形しています)。

<style>
@-moz-keyframes roll {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes roll {
  100% {
    -o-transform: rotate(360deg); 
  }
}

@-webkit-keyframes roll {
  100% {
    -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;
 }
</style>

アニメーション名は「roll」。動作は360度回転するというもの。-moz-〜はFirefox向け。-o-〜はOpera向け。-webkit-〜はChromeとSafari向けの設定になっています。

@-moz-keyframes roll {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes roll {
  100% {
    -o-transform: rotate(360deg); 
  }
}

@-webkit-keyframes roll {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

そのアニメーションを4秒間で実行、実行回数は1回という設定でbodyタグのスタイルに設定する事で今回の処理を実装しています。

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