ダイナミックに切り替わるページナビゲーション
一見するとシンプルなデザインのサイト「HUMAAN」。その魅力は、細部まで作り込まれたインタラクションにある。中でも目を引くのが、フルスクリーンで展開されるダイナミックな変形アニメーションだ。何気なく下部のメニューをクリックすると、ページ全体が大きく回転しながら切り替わる。その動きが非常に気持ちよく、コンテンツをうまく魅せる素敵な仕掛けだ。
この3D回転は、連載第1回「CSS Transitionsを使った3Dロールオーバーのアイデア」で紹介した3D変形と同じ仕組みで実装されている。今回は、3D回転によるダイナミックなコンテンツ切り替えについて、第1回の記事をヒントに再現してみよう。
STEP 1：3Dの構造を考える
最初に、ページ全体を回転させるため、ウィンドウと同じ大きさの2つの面（div要素）を用意し、transformプロパティで変形させて直方体を組み立てる。
底面（BOTTOM）は、縦方向にウィンドウの高さの半分（-H/2）だけ移動させ、rotateXプロパティで-90度回転させる。正面（FRONT）は、translateZプロパティで手前にウィンドウの高さの半分（H/2）移動させる。
これで2つの面がL字状に配置されるが、この状態では正面が手前に突出しているため、正面のコンテンツが画面上に表示されない。そこで、今度は2つの面をまとめて奥側へ移動させる。
HUMAANのコンテンツ切り替えは2面のみ利用しているのでこれで完成だが、今回は背面と上面を加え、コンテンツを4面に配置できる直方体にしてみよう。
背面（BACK）や上面（TOP）も前の2つと同様の考え方で配置できる。詳しくは以下の図を参照してほしい。実装時のポイントは、ウィンドウサイズをjQueryなどで取得し、translateZとtop/bottomの値を動的に設定すること。これでウィンドウサイズに関係なく、正しい位置関係で配置できる。
■ソースコード（HTML）
<div class="stage">
<div class="cube">
<div class="cube_bottom">BOTTOM</div>
<div class="cube_top">TOP</div>
<div class="cube_back">BACK</div>
<div class="cube_front">HOVER</div>
</div>
</div>
■ソースコード（CSS）
.stage{
position: fixed;
top: 0;
left: 0;
-webkit-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
-moz-perspective: 1000px;
perspective: 1000;
}
.cube {
position: relative;
margin:0 auto;
transform-style: preserve-3d;
transition:all 1s;
}
.cube div {
position: absolute;
color: #fff;
text-align: center;
}
.cube_top {
background: rgba(255,241,0,0.7);
left: 0px;
top: -50px;
left: 0px;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.cube_bottom {
background: rgba(255,241,0,0.7);
left: 0px;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.cube_front {
background: rgba(215,0,81,0.7);
top: 0px;
left: 0px;
}
.cube_back {
background: rgba(215,0,81,0.7);
top: 0px;
left: 0px;
}
■ソースコード（JavaScript）
$(function(){
W = $(window).width();
H = $(window).height();
$('.cube').css({'transform':'translateZ(-'+H/2+'px)'});
$('.cube,.cube div').css({width :W,height:H});
$('.cube_top').css({top:-H/2});
$('.cube_bottom').css({bottom:-H/2});
$('.cube_front').css({'transform':'translateZ('+H/2+'px)'});
$('.cube_back').css({'transform':'translateZ(-'+H/2+'px) rotateX(180deg)'});
});
STEP 2：フルスクリーンで画像を表示する
次に、直方体の4つの面いっぱいにそれぞれ画像を表示する。画像はCSSで背景画像として配置し、background-size: cover;を設定することで要素の全面に表示できる。
■ソースコード（CSS）
.cube_top {
background-image:url(img/3.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
top: -50px;
left: 0px;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.cube_bottom {
background-image:url(img/2.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
left: 0px;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.cube_front {
background-image:url(img/1.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
top: 0px;
left: 0px;
}
.cube_back {
background-image:url(img/4.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
top: 0px;
left: 0px;
}
