第17回 立体的なナビゲーションバーのアニメーション | gihyo.jp今回のお題は、ボタンが立体的に並んだナビゲーションバーだ（サンプル1）。マウスポインタを重ねると、ボタンが飛び出す。「Navigation Bar by Jan Kaděra」のデザインとアニメーションをもとに、わかりやすく組み立て直した。3次元の動きで、ボタンの数も多い。少しやっかいそうに感じたかもしれない。ところが、思いのほかコードはたやすい。 サンプル1 CSS3: 3D style navigation bar 平面的なナビゲーションバー まずは<head>要素にいくつか仕込みをしておこう。ボタンのアイコンにはFont Awesomeを使うので、つぎのようにCDNを読み込む（第15回の「アイコンWebフォントを使う」参照）。おなじみの-prefix-freeも加える。そして、今回はリセットCSSを用いた。ブラウザによって異なるデフォルトをリセットすることで、表現が揃えられ
