transform:rotate() 要素を回転表示する まとめ
左側のロゴにマウスを合わせると変化します。
右ロゴにはアニメーション設定なし。
1. rotate(回転角度)
-moz-transform: rotate(160deg);
-webkit-transform:
rotate(160deg);
-moz-transform: rotate(-160deg);
-webkit-transform:
rotate(-160deg);
2. rotateX(回転角度)
-moz-transform: rotateX(140deg);
-webkit-transform:
rotateX(140deg);
-moz-transform: rotateX(-140deg);
-webkit-transform:
rotateX(-140deg);
3. rotateY(回転角度)
-moz-transform: rotateY(160deg);
-webkit-transform:
rotateY(160deg);
-moz-transform: rotateY(-160deg);
-webkit-transform:
rotateY(-160deg);
4. rotateZ(回転角度)
-moz-transform: rotateY(160deg);
-webkit-transform:
rotateZ(160deg);
-moz-transform: rotateY(-160deg);
-webkit-transform:
rotateZ(-160deg);
5. rotate3d(数値,数値,数値,回転角度)
-moz-transform: rotate3d(30,10,20,160deg);
-webkit-transform:
rotate3d(30,10,20,160deg);
-moz-transform: rotate3d(30,10,20,-160deg);
-webkit-transform:
rotate3d(30,10,20,-160deg);
※webkit系ブラウザ(safari,googleChrome等)、moz系ブラウザ(firefox)で確認してください。