このページの本文へ

CSS Transitionsを使った3Dロールオーバーのアイデア

2014年05月12日 11時00分更新

利倉健太/Stronghold

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

STEP 3:動きをつけてみる

 STEP 2で立方体が完成したので、マウスオーバーによって立方体が回転するように、動きを付けてみよう。

 立方体の回転は、.cubeに対してtransform-style: preserve-3d;を指定し、子要素を3Dで描画するように設定してから、transitionプロパティでアニメーションの種類と時間を指定している。

 マウスオーバー(.stage:hover .cube)のスタイルには、横方向へ回転させる場合は、Y軸を基準にするためtransform: rotateY(360deg);を指定する。縦方向へ回転させる場合は、X軸を基準にするためtransform: rotateX(-360deg);を指定する。

■横回転のソースコード(CSS)

.stage{
 -webkit-perspective: 400;
 -ms-perspective: 400;
 -o-perspective: 400;
 -moz-perspective: 400px;
 perspective: 400;
}

.cube {
 height: 100px;
 width: 100px;
 position: relative;
 margin:0 auto;
 -webkit-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition:all 1s;
 -o-transition:all 1s;
 transition:all 1s;
}

/* side_topからside_leftのCSSは同上 */

.stage:hover .cube{
 -webkit-transform: rotateY(360deg);
 -ms-transform: rotateY(360deg);
 -o-transform: rotateY(360deg);
 transform: rotateY(360deg);
}

■縦回転のソースコード(CSS)

.stage{
 -webkit-perspective: 400;
 -ms-perspective: 400;
 -o-perspective: 400;
 -moz-perspective: 400px;
 perspective: 400;
}

.cube {
 height: 100px;
 width: 100px;
 position: relative;
 margin:0 auto;
 -webkit-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition:all 1s;
 -o-transition:all 1s;
 transition:all 1s;
}

/* side_topからside_leftのCSSは同上 */

.stage:hover .cube{
 -webkit-transform: rotateX(-360deg);
 -ms-transform: rotateX(-360deg);
 -o-transform: rotateX(-360deg);
 transform: rotateX(-360deg);
}

STEP 4:複数の立方体

 STEP 3で立方体の動きが1つ完成したので、最後に立方体を複数設置し、ナビゲーションのデモを完成させよう。

 基本はSTEP 3で作った立方体をコピーするだけだが、複数の立方体を設置するため、パースの基準となる.global_stageで全体を囲い、それぞれの立方体(.cube)にはz-indexで前後関係を持たせている。

■ソースコード(HTML)

<div class="global_stage">

 <div class="stage">
  <div class="cube" style="z-index:1;">
   <div class="side_bottom">BOTTOM</div>
   <div class="side_top">TOP</div>
   <div class="side_back">BACK</div>
   <div class="side_right">RIGHT</div>
   <div class="side_left">LEFT</div>
   <div class="side_front">FRONT</div>
  </div>
 </div>
 <div class="stage">
  <div class="cube" style="z-index:2;">
   <div class="side_bottom">BOTTOM</div>
   <div class="side_top">TOP</div>
   <div class="side_back">BACK</div>
   <div class="side_right">RIGHT</div>
   <div class="side_left">LEFT</div>
   <div class="side_front">FRONT</div>
  </div>
 </div>
 <div class="stage">
  <div class="cube" style="z-index:3;">
   <div class="side_bottom">BOTTOM</div>
   <div class="side_top">TOP</div>
   <div class="side_back">BACK</div>
   <div class="side_right">RIGHT</div>
   <div class="side_left">LEFT</div>
   <div class="side_front">FRONT</div>
  </div>
 </div>
 <div class="stage">
  <div class="cube" style="z-index:2;">
   <div class="side_bottom">BOTTOM</div>
   <div class="side_top">TOP</div>
   <div class="side_back">BACK</div>
   <div class="side_right">RIGHT</div>
   <div class="side_left">LEFT</div>
   <div class="side_front">FRONT</div>
  </div>
 </div>
 <div class="stage">
  <div class="cube" style="z-index:1;">
   <div class="side_bottom">BOTTOM</div>
   <div class="side_top">TOP</div>
   <div class="side_back">BACK</div>
   <div class="side_right">RIGHT</div>
   <div class="side_left">LEFT</div>
   <div class="side_front">FRONT</div>
  </div>
 </div>
</div>

■ソースコード(CSS)

.global_stage{
 width: 500px;
 -webkit-perspective: 400;
 -ms-perspective: 400;
 -o-perspective: 400;
 -moz-perspective: 400px;
 perspective: 400;
}

.stage{
 width: 100px;
 height: 100px;
 float: left;
}

.cube {
 height: 100px;
 width: 100px;
 position: relative;
 margin:0 auto;
 -webkit-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition:all .3s;
 -o-transition:all .3s;
 transition:all .3s;
}

/* .cube divから.stage:hover .cubeのCSSは同上 */

 以上で3D表現とアニメーションを使ったロールオーバーが完成した。すべてCSSとHTMLだけで構成しているので、サイズやカラーの変更、動きの調整も簡単にできる。ぜひ試してみてほしい。

バリエーション&アレンジのヒント

 アニメーションをマウスオーバーやクリックではなく、keyframesに指定することでDESIGN EMBRANCEDのローディング画面のようなおもしろい動きも実現できる。

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/001/7.html

著者:利倉健太(としくら・けんた)

著者写真

1985年生まれ。株式会社レターズのデザイナー。2010年からWebデザイナーとして働き始める。Webに関する活動拠点「Stronghold」というサイトでブログを書いたり、デザインの実験をしている。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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

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