このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

css3で要素を回転させる 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で遠近感の設定を追加して行きます。