このページの本文へ

DESIGN 先端サイトに学ぶCSS3/jQueryアニメーションデザイン ― 第7回

CSS3で作るダイナミックな3D表現

2014年08月07日 11時00分更新

利倉健太 / Stronghold

  • この記事をはてなブックマークに追加
本文印刷

今回の注目サイト:
HUMAAN

http://humaan.com/

 オーストラリアでさまざまな制作を手がけるデジタルエージェンシー

ダイナミックに切り替わるページナビゲーション

 一見するとシンプルなデザインのサイト「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;
}

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング