【CSSアニメーション】要素を回転させる方法を解説します。

などの疑問や悩みを解決してまいります。

サイトの種類によって要素を回転させて表示させたいということもあるかと思います。

今回はCSSのみを使用して要素を回転させる方法を解説します。

CSSアニメーションの基本@keyframeとanimetionプロパティについての解説記事はこちら

おすすめ！

【CSSアニメーション】@keyframesとanimationプロパティについて解説します。

続きを見る

rotate()関数で要素を回転させる

要素を回転させるにはtransformプロパティのrotate()関数を使用します。

rotate()関数の引数にdegという単位で数値を入れることで要素を回転させることができます。

正の数であれば右に回転、負の数であれば左に回転します。

それでは実際に見てみましょう。

See the Pen Untitled by koutarou mori (@koutarou-mori) on CodePen.

このようにブロックの要素を5つ用意しまして、それぞれ0°、45°、90°、135°、180°回転させました。

rotate()関数は要素の中心を軸に回転させることができます。

次にブロック要素を一つにして、それぞれの回転、色を@keyframeとanimationプロパティを使用して一つのアニメーションにしていきたいと思います。

See the Pen rotate()関数の使い方（@keyframeとanimetionプロパティ） by koutarou mori (@koutarou-mori) on CodePen.

このようにブロックにそれぞれに指定していたCSSを一つにアニメーションに収めることができました。

今回使用した@keyframeの書き方、animationプロパティは以下の記事で解説していますのでここでの詳しい解説は割愛します。

CSSアニメーションの基本@keyframeとanimetionプロパティについての解説記事はこちら

おすすめ！

【CSSアニメーション】@keyframesとanimationプロパティについて解説します。

続きを見る

CODE PENのCSSにもコメントで簡単に意味を記載していますので、「このプロパティなんだっけ」ぐらいの感覚で確認していただけますと幸いです。

rotateX()関数で要素を縦に回転させる

次は要素を縦に回転してみます。

要素を縦に回転させるにはtransformプロパティのrotateX()関数を使用します。

この関数を使用することで回転させたい要素に対してX軸を中心に縦回転させることができます。

実際に見てみましょう。

See the Pen rotateX()関数の使い方 by koutarou mori (@koutarou-mori) on CodePen.

静止画だと少しわかりづらいのですが、このように要素の中心のX軸を回転軸として縦に回転しています。

上から順に０°、45°、90°、135°、180°回転しています。

これらを一つのアニメーションにまとめると以下のようになります。

See the Pen rotateX()関数（@keyframeとanimationプロパティ） by koutarou mori (@koutarou-mori) on CodePen.

アニメーションにするとわかりやすいですね。

以下の図のように要素のX軸を中心に回転しているため、縦に回転させることができます。

rotateY()関数で要素を横に回転させる

次は横に回転させますが、transformプロパティのrotateY()関数を使用します。

rotateX()関数の流れからわかるかと思いますが、rotateY()関数は要素をY軸を中心に回転させることができます。

まずは静止画で見てみましょう。

See the Pen rotateY()関数の使い方 by koutarou mori (@koutarou-mori) on CodePen.

わかりづらいかもですが、上から順に０°、45°、90°、135°、180°Y軸を中心に回転しています。

これらを1つのアニメーションにまとめると以下のようになります。

See the Pen rotateY()関数の使い方（@keyframeとanimationプロパティ） by koutarou mori (@koutarou-mori) on CodePen.

以下の図のように要素のY軸を中心に回転しているため、横に回転させることができます。

rotateZ()関数で要素を回転させる

次はtransformプロパティのrotateZ()関数を使用して要素を回転させます。

これまでの流れからするとこの関数は要素のZ軸を中心に要素が回転します。

つまりrotate()関数と同じ動きになるのです。

See the Pen rotateZ()関数の使い方 by koutarou mori (@koutarou-mori) on CodePen.

次にアニメーションでの動きを見ていきます。

See the Pen rotateZ()関数の使い方（@keyframeとanimationプロパティ） by koutarou mori (@koutarou-mori) on CodePen.

rotate3d();関数で要素を3D回転させる

これまでのrotate()関数、rotateX()関数、rotateY()関数、rotateZ()関数は2D回転で使用しました。

rotate3d()関数はrotate3d:(X,Y,Z,回転量の指定);と記述することができます。

今回解説するtransformプロパティのrotate3d()関数は名前にある通り3D回転させるための関数です

これらの回転軸すべてを使用して、要素を3D回転させていきます。

See the Pen rotate3d()関数使い方 by koutarou mori (@koutarou-mori) on CodePen.

3D回転がわかりやすいように要素も3D仕様にしています。

要素を回転させる方法まとめ

要素を中心を軸に回転させるにはrotate()関数を、要素を縦に回転させたい場合はrotateX()関数を、要素を横に回転させたい場合はrotateY()関数を使用するということだけ理解いただけたらOKです！