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;