ダイナミックに切り替わるページナビゲーション 一見するとシンプルなデザインのサイト「HUMAAN」。その魅力は、細部まで作り込まれたインタラクションにある。中でも目を引くのが、フルスクリーンで展開されるダイナミックな変形アニメーションだ。何気なく下部のメニューをクリックすると、ページ全体が大きく回転しながら切り替わる。その動きが非常に気持ちよく、コンテンツをうまく魅せる素敵な仕掛けだ。 この3D回転は、連載第1回「CSS Transitionsを使った3Dロールオーバーのアイデア」で紹介した3D変形と同じ仕組みで実装されている。今回は、3D回転によるダイナミックなコンテンツ切り替えについて、第1回の記事をヒントに再現してみよう。 STEP 1:3Dの構造を考える 最初に、ページ全体を回転させるため、ウィンドウと同じ大きさの2つの面(div要素)を用意し、transformプロパティで変形さ
![CSS3で作るダイナミックな3D表現 (1/2)](https://cdn-ak-scissors.b.st-hatena.com/image/square/1b5e2982ed5f752f81c709da00045c18248ba672/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2014%2F08%2F07%2F1007235%2Fl%2Fb55ced8d1abed4f3.jpg)