【簡単！】CSSアニメーションの回転方法を基本から応用まで実装例を踏まえて詳しく解説
生徒CSSの回転アニメーションは
どうやって実装すれば良いでしょうか？
ペン博士今から詳しく解説するからよーく聞くんだぞ！
生徒はい！お願いします！
CSSの回転アニメーションは、Webページやアプリのデザインに動きを加えて魅力的に見せたい場合に非常に有効です。
本記事では、CSSを使って要素を滑らかに回転させる方法や、基本的な使い方から応用方法まで、詳しく説明していきます。
CSSアニメーションについてより詳しく知りたい方はこちらをご覧ください。
あわせて読みたい
CSS アニメーションの使用 - CSS: カスケーディングスタイルシート | MDN
CSS アニメーションにより、ある CSS のスタイル設定を別の設定へと遷移させることができます。アニメーションは、2 種類の要素で構成されています。 それは、アニメーショ...
詳しくはこちらの記事をご覧ください。
あわせて読みたい
【副業初心者必見】「月5万円」を最速で達成！会社員を辞め、完全にフリーランスへ転向！？
ペン博士！最近、「副業で月5万円」ってよく聞くんですけど、本当にそんなに早く達成できるもんなんですか？ 良い質問じゃな。実はな、ワシのスクールに通っていた受講…
堀さんの主な制作実績はこちら
目次
CSSアニメーションの回転のメリット
生徒回転アニメーションって魅力的ですよね！
どんなメリットがあるんですか？
ペン博士良い質問じゃ！
今から説明するぞ！
回転のアニメーションは、ユーザーの目を惹きつけやすく、魅力のあるWebサイトが作成できます。
また、CSSのみで回転アニメーションが実装可能なので、複雑なコードを書く必要がありません。また、他のCSSプロパティと組み合わせることで、さらに多様なアニメーション効果を作れるので、ユニークなWebサイトを作成できるでしょう。
生徒そうなんですね！実装してみたいです！
ペン博士いいぞ！今からその実装方法を詳しく説明するぞ！
CSSアニメーションの回転の実装方法
ペン博士CSSの主な回転方法は、`@keyframes`を使って、
要素を360度回転させるシンプルな方法じゃ
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}@keyframes rotateAnimationはアニメーションの定義で、fromステップで0度（初期状態）から、toステップで360度回転させます。
このコードを使うと、要素が無限にスムーズに回転するアニメーションが実装できます。
実装例
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
rotate クラスは、回転させたい要素に適用します。animationプロパティで、rotateAnimationという名前のアニメーションを5秒間の周期で無限に実行するように設定しています。linearは一定速度で回転させるための指定です。
回転アニメーションの応用方法
ペン博士CSSアニメーションの回転は、さまざまな応用が可能じゃ。
以下にいくつかの応用例と、それぞれの実装コードを紹介するぞ！
X軸の回転アニメーション
要素がX軸を中心に回転するアニメーションを解説します。
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
@keyframes ルールを使って、回転のアニメーションを定義しています。rotateX プロパティでX軸を中心に回転を指定し、0% は回転前、50% は180度回転、100% は1回転完了です。
animation プロパティで、要素にアニメーションを適用し、2s infinite linear はアニメーションの時間、無限ループ、一定速度を示しています。
Y軸の回転アニメーション
続いて、要素がY軸を中心に回転するアニメーションを解説します。
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
@keyframes ルールを使用して、Y軸を中心とした回転アニメーションを定義しています。
rotateY プロパティを使用してY軸回転を指定し、0% は回転開始位置、50% は180度回転、100% は1回転完了です。
animation プロパティでアニメーションを適用し、2s infinite linear は、アニメーションの持続時間、無限ループ、一定速度を示しています。
ホバー時に回転アニメーション
ホバー（マウスオーバー）したときに回転させるアニメーションです。ユーザーがインタラクションを行った際に回転することで、ボタンやロゴなどにダイナミックな効果を加えます。
実装例
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
HTML部分では、<div class="rotate-box"> という要素を定義し、回転アニメーションを適用するためのコンテナを作成しています。
CSS部分では、@keyframes を使って、rotateAnimation というアニメーションを定義し、このアニメーションは0度から360度まで回転します。
.rotate-box クラスに対して、animation プロパティを適用し、5秒ごとに無限ループで回転する設定です。
要素がクリックされた時に1回だけ回転
クリックされたときに1度だけ回転するアニメーションです。ユーザーがクリックした際にボタンやアイコンが一瞬回転する効果を作り出せます。
実装例
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
HTML部分では、隠された<input type="checkbox">要素と、それに関連付けられた<label>要素を使用し、labelをクリックすると、checkboxがトグルされます。
CSS部分では、checkboxがチェックされたときに、回転アニメーションがlabel（.rotate-box）に適用されるようにしています。
アニメーションは1秒で完了し、forwardsでアニメーション終了時にその状態を維持する設定です。
#rotateToggle:checked + .rotate-box で、checkboxがチェックされたときのアニメーションをトリガーしています。
3D回転アニメーション
2D回転ではなく、3D空間で要素を回転させる例です。奥行き感を出し、より立体的な効果を作り出すことができます。
実装例
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
HTML部分では、<div class="rotate-box">という要素を定義しています。この要素が3D回転の対象です。
CSS部分では、@keyframes rotateAnimationを使用して、X軸とY軸を中心にした3D回転を定義しています。
rotate3d(1, 1, 0, 360deg) は、X軸とY軸に沿った3D回転を表し、animationプロパティでアニメーションが3秒かけて無限に繰り返される設定です。
また、transform-style: preserve-3d により、要素が3D空間内で回転するように指定しています。
複数の要素が連続して回転するアニメーション
複数の要素が順番に回転するアニメーションです。ローディング画面や目を引くデザイン要素として利用できます。
実装例
See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.
HTML部分では、<div class="rotate-box"></div>を3つ用意しています。これが回転する対象の要素です。
CSS部分では、すべての要素に対してrotateAnimationアニメーションを3秒で無限に繰り返すように設定しています。
2番目の要素には0.5秒の遅延、3番目の要素には1秒の遅延を追加しています。これが、各要素が順番に回転する仕組みです。
また、nth-child(2)とnth-child(3)で2番目と3番目の要素に対して異なるアニメーションの遅延時間を設定しています。
ペン博士これらを覚えておけば大丈夫じゃぞ！
生徒ありがとうございます！勉強になりました！
まとめ
以上、CSSで回転アニメーションを実装する方法を解説しました。
回転アニメーションは、Webサイトを魅力的に見せる非常に有効な方法です。様々な回転アニメーションを駆使し、ユーザーを惹きつける魅力的なWebサイトを作成していきましょう！
主な回転アニメーションは以下の通りです。
`@keyframes`を使ったアニメーション
X軸の回転アニメーション
Y軸の回転アニメーション
ホバー時に回転アニメーション
要素がクリックされた時に1回だけ回転
3D回転アニメーション
複数の要素が連続して回転するアニメーション
是非、本記事で紹介した方法を活用してみてください。
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
