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

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だけで構成しているので、サイズやカラーの変更、動きの調整も簡単にできる。ぜひ試してみてほしい。