タブにマウスオーバーで動きを付ける方法

ある方がやり方をアップされてたので早速やり方を実践してみました。

タブ
タブ(通常)のリンク(マウスオーバー)【ul#MainNav li a:hover】
に
縦回転
transition:2s;
transform:rotateX(360deg);
-webkit-transform:rotateX(360deg);
-ms-transform:rotateX(360deg);
を追加

横回転
transition:2s;
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
を追加

時計周りに回転
transition:2s;
transform:rotateZ(360deg);
-webkit-transform:rotateZ(360deg);
-ms-transform:rotateZ(360deg);
を追加（Zは省いても可）

ちなみに
(360deg);の中の数字は回転する角度、360だと1回転、720だと2回転、180だと半回転になります。

Z(360deg);をZ(-360deg);のすると反時計回りになります。

貼り付けた
transition:2s;
は回転する秒数で、少なくすると速く、多くすると遅く回転します。
自分は同じ場所に貼り付けてますが、ページの基本のリンク【a】等の全てに適応させる様な場所に貼り付けると個別にこのタグを貼り付ける必要がなくなります。

以前アップ（http://minkara.carview.co.jp/userid/585601/car/2334972/4132415/note.aspx）しましたが、自分は、マウスオーバーでピクッと動くこのようなタグ
position:relative;
bottom:-2px;
left:3px;
をリンクに貼り付けてまして、この状態だと回転とピクッと動くアクションが同時に起きてぎこちない動きになるので、回転のタグのところに
position:relative;
bottom:0px;
left:0px;
と動かない指定をしてやります。

画像はプレビューで時計回りの途中
動画は採用してる縦回転

回転ついでに…
自分はタブに角度を付けてますが、同じ種類のタグで

タブ(通常)のスタイル【ul#MainNav li.nav】
に
transform:rotate( 3deg );
を追加してます。

3は角度なので、3度傾けてるって事です。