サンプル例の内容

サンプルはすべて、transition:all 1s linear を指定。それぞれ白枠にホバーするとボックスが変化します。

【例1】
マウスオーバーでA:rotate(90deg)、B:rotateZ(90deg)を指定して比べてみると、rotate(90deg) = rotateZ(90deg) が確認できました。

【例2】
マウスオーバーでC:rotateX(90deg)、D:rotateY(90deg)の動作確認です。

【例3】
勘違いしやすい例として、E:rotate3d(1,1,1,90deg)と、
F:rotateX(90deg) rotateY(90deg) rotateZ(90deg)を比較。
rotate3dは(0,0,0)→(1,1,1)の軸に沿って90deg なので、rotateX(90deg) rotateY(90deg) rotateZ(90deg)とは違う結果になっています。

【例4】
面白い効果として、360で一回転で、それ以上だとくるくる回転します。
マウスオーバーでG:rotateZ(-540deg)、H:rotateZ(3600deg)。
Gは逆方向に1回転半で、Hは10回転。

要素を回転プロパティ

rotate(d)

角度dで回転（２Ｄ回転なので右回りでdの角度）。例 transform:rotate(30deg)

rotateX(d)

X軸を軸に、時計回り角度dで回転。例 transform:rotateX(30deg)

rotateY(d)

Y軸を軸に、時計回り角度dで回転。例 transform:rotateY(30deg)

rotateZ(d)

Z軸を軸に、時計回り角度dで回転。例 transform:rotateZ(30deg)

rotate3d(x,y,z,d)

(0,0,0)→(x,y,z)のベクトルを軸に時計回り角度dで回転。例 transform:rotate3d(1,1,1,30deg)

ページトップへ