【CSS】rotateの回転方向を確認したい

こんにちは朱夏です。

今回は、要素を回転させるCSSのrotateについて調べてみました。
rotateにはいくつか種類があり、それぞれに回転軸が違っています。
それぞれがどんな回転をするのかを確認してみました。

それではいってみましょう。

rotateの場合

rotateの場合はこんな感じに回転します。

See the Pen
xxwoLBL by 朱夏 (@syunatsu1)
on CodePen.

時計回りにくるくると回転していますね。
逆回転させたい場合は、角度の指定を以下のようにすると出来ます。

@keyframes anime1 {
  0% {
    transform: rotate(360deg);
  } 100% {
    transform: rotate(0deg);
  }
}

もしくは、0%の角度を0deg、100%の角度を-360degでも同じ結果を得る事が出来ます。

rotateXの場合

rotateXの時はこんな回転をします。

See the Pen
WNQqZeN by 朱夏 (@syunatsu1)
on CodePen.

回転軸が横線になりましたね。
通常のrotateと同じ方法で逆回転させることが可能ですが、無地の要素だと回転方向が変わったようには見えませんでした。

rotateYの場合

rotateYの回転はこんな感じです。

See the Pen
qBOzPbo by 朱夏 (@syunatsu1)
on CodePen.

今度は縦軸を中心に回転しました。
これも逆回転はあまり意味が無さそうでした。

rotateZの場合

rotateZの回転はこんな感じです。

See the Pen
LYpKzbr by 朱夏 (@syunatsu1)
on CodePen.

普通のrotateと同じ結果になりました。
使い分けとかはないんですかね？

逆回転も通常のrotateと同じ方法で出来ました。

rotate3dの場合

rotate3dの回転はこんなことが出来ました。

See the Pen
abvgLEG by 朱夏 (@syunatsu1)
on CodePen.

rotate3dの回転方向の指定の仕方はちょっと特殊で、以下の様な方法で指定しました。

X,Y,Zで回転軸を決めて、回転角度を指定するといった書き方になっています。

今回はXYZすべてに1を指定して回転させてみました。
この数値は1以上を指定する事で、回転軸を更にずらしていくことが可能です。
また、0を指定した場合、その軸は無効な状態で回転させることが出来ます。
Zを0にした場合は、X軸とY軸を使って斜めに回転をし始めました。

色々数値をいじって、どんな回転が出来るか試してみるのが良いと思います。

あとがき

というわけで、CSSのrotateの回転について確認してみました。
要素の表示角度を変えるために使うことが多いイメージですが、アニメーションで回転させることで、具体的な回転の方向がイメージしやすかったかなと思います。

今回は以上です。
次回もよろしくお願いします。