【CSS】「rotate」プロパティの使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの「rotate」プロパティの使い方について解説します！丁寧にまとめていくので、興味がある方はぜひご一読ください。

「rotate」プロパティを使うと「要素を回転させる」ことができます。

また、下の動画でもCSSの「rotate」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「rotate」プロパティを使うと何ができるのか？

<div class="container">
    <div class="box"></div>
</div>

.container {
    width: 1000px;
    margin: 100px auto;
}
.box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transition-duration: 1.5s;
}
.box:hover {
    rotate: 360deg;
}

「rotate」プロパティを使うと「要素を回転させる」ことができます。

平行移動させたり、歪ませたりはできませんが、「回転」させることは可能です！

なるほど！

前提知識！

まずは「rotate」の指定に必要な前提知識からまとめますね。

「軸」について。

このような「軸」が存在します。

また、「x軸」と「y軸」に対して垂直に交わる軸が「z軸」になります。方向はパソコンの画面から僕らに向かってくる感じの方向です。

CSSにおける「角度」の表し方！

CSSで「角度」は下記の単位を使って表します。

• 「deg」
• 「grad」
• 「rad」
• 「turn」

「deg」は「degree」の略で、「360deg」＝１周です。

「grad」は「グラード」(grade)の略で、「400grad」で１周です。

「rad」は「ラジアン」(radian)の略で、「1rad」は「180/π 度」です。なので「１周」は「2πラジアン」で、およそ 6.2832radとなります。

「turn」は「1turn」で「１周」です。

といろいろありますが、主に使われるのは「deg」になりるので、これだけ覚えておけばOKだと僕は思います。

「正の値」を入れると時計回り！

「90deg」とすると、時計回りに90度という意味になります。

また「-90deg」とすると、反時計回りに90度となります。

なので「90deg」=「-270deg」となる感じですね。静的な場合はこれで同じ意味を表すのですが、動的な場合は方向に違いが出るので注意が必要です。

「rotate」の使い方！

それでは「rotate」の使い方をまとめていきますね！

「rotate」の指定方法には何種類あるのか？

「rotate」の指定方法は下記の通りです。

• 「none」キーワード
• 「角度」だけの指定
• 「軸名」+「角度」
• 「ベクトル」と「角度」

これら４つのタイプの指定方法があります。

初期値は「none」

「translate」の初期値は「none」です。

「none」を使うと回転しないことを明示的に指定できます。

「角度」だけの指定

.box:hover {
    rotate: 90deg;
}

このように「角度」だけで指定すると「z軸」の周辺を回る感じになります。最も簡単に使えるのでよく使われるかなと思いますね。

「軸名」+「角度」

.box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transition-duration: 1.5s;
    color: white;
    text-align: center;
    line-height: 200px;
    font-size: 40px;
}
.box:hover {
    rotate: y 180deg;
}

「軸名」と「角度」で回転の指定もできます。

順番は不同なので、角度から書いてもOKです。

「ベクトル」と「角度」

.box:hover {
    rotate: 1 1 0 360deg;
}

「ベクトル」と「角度」で回転の指定もできます。

１つ目の数値が「x軸」の成分で、

２つ目の数値が「y軸」の成分で、

３つ目の数値が「z軸」の成分になります。

「360geg 1 1 0」→ OK！

「1 360deg 1 0」→ NO！

ふむふむ！

「transition-duration」や「animation-duration」の指定を忘れずに！

「translate」を使うなら「transition-duration」や「animation-duration」と組み合わせて使わないと、一瞬で遷移が完了してしまい、アニメーションっぽく見えなくなってしまうので、注意しましょう。

「transition-duration」や「animation-duration」を使って、「アニメーションにかかる時間」の指定をしてあげることで初めてアニメーション感がでるのです。

参考リンク！

仕様書。
https://drafts.csswg.org/css-transforms-2/#individual-transforms

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/rotate

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「CSSのアニメーション編」です。

「CSSのアニメーション編」はCSSを使ったアニメーションの知識が網羅的に学習できるコンテンツとなります。

こちらの再生リストでCSSアニメーションについて丁寧に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「rotate」プロパティを使うと「要素を回転させる」ことができます。

「x軸」「y軸」「z軸」が存在する。

CSSで「角度」は下記の単位を使って表す。

• 「deg」
• 「grad」
• 「rad」
• 「turn」

よく使われるのは「deg」。

「rotate」の指定方法は下記の通り。

• 「none」キーワード
• 「角度」だけの指定
• 「軸名」+「角度」
• 「ベクトル」と「角度」

初期値は「none」。

「transition-duration」や「animation-duration」の指定を忘れずに。

この記事が気に入った方は僕のTwitter（@chibasyuta）のチェックもお願いします！

また、下の動画でもCSSの「rotate」プロパティの使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！