スマートフォンサイトで3D効果 transform rotate()
2011.03.29
この記事は最終更新日から1年以上が経過しています。
css3のみで行う3d 回転 transformプロパティです。
transform:rotate()を使い回転させましょう。
【回転】
rotate(回転角度)
角度による2D回転の指定を行えます。
-webkit-transform: rotate(0deg);
rotateX(回転角度)
X軸を軸とする角度によって時計回りの回転の指定ができます。
-webkit-transform: rotateX(0deg);
rotateY(回転角度)
Y軸を軸とする角度によって時計回りの回転を指定ができます。
-webkit-transform: rotateY(0deg);
rotateZ(回転角度)
Z軸を軸とする角度によって時計回りの回転を指定ができます。
-webkit-transform: rotateZ(0deg);
これらを使って回転するアニメーションを作りましょう。
適当にdivを作成。そしてcssも適当に設定させて頂きます。
#rX , #rY , #rZ { width: 200px; height: 100px; background: #000; border: #f00 2px solid; color: #fff; }
そしたらアニメーションの設定を!
@-webkit-keyframes
を使い、アニメーションの設定を行います。
X軸回転
@-webkit-keyframes turnX{ 0%{-webkit-transform: rotateX(0deg);} 100%{-webkit-transform: rotateX(360deg);} }
Y軸回転
@-webkit-keyframes turnY{ 0%{-webkit-transform: rotateY(0deg);} 100%{-webkit-transform: rotateY(360deg);} }
Z軸回転
@-webkit-keyframes turnZ{ 0%{-webkit-transform: rotateZ(0deg);} 100%{-webkit-transform: rotateZ(360deg);} }
それぞれのdivにマウスオーバーするとアニメーションするように設定します。
animation-nameはturnX,turnY,turnZをそれぞれ設定。
animation-durationで一回分の長さの設定。
animation-iteration-countは何回行うか?
また、マウスオーバーがわかるようにopacityで透過50%にしています。
#rX:hover{ -webkit-animation-name: turnX; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; opacity:0.5; }
webkit搭載ブラウザ(safari ,Google Chrome)のみ確認できます。
これをperspectiveで遠近感の設定を追加して行きます。