CSSで簡単!回転効果を7ステップでマスター

CSS rotateを使った回転効果のサンプルイメージCSS
この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

Webデザインにおいて、動的な要素を取り入れることでユーザーの興味を引きやすくなります。

今回は、CSSを用いた回転効果の実装方法について、初心者でもわかりやすい7ステップで徹底解説します。

これを読めば、あなたもCSSのrotateを使いこなせるようになりますよ。

●ステップ1:CSSのrotateの基本

まずは、CSSのrotateを使った回転効果の基本から始めましょう。

rotateは、要素を指定した角度だけ回転させることができる関数です。基本的な使い方は以下のようになります。

.class-name {
  transform: rotate(角度);
}

ここで、角度は度数法(deg)で指定します。例えば、45度回転させたい場合は、以下のように記述します。

.class-name {
  transform: rotate(45deg);
}

●ステップ2:回転の中心点を変更する

デフォルトでは、要素の中心点を軸に回転しますが、回転の中心点を変更することも可能です。

その方法は、transform-originプロパティを使って指定します。

次の例では、左上を基準に回転させています。

.class-name {
  transform-origin: top left;
  transform: rotate(45deg);
}

●ステップ3:回転アニメーションの実装

回転効果をアニメーションとして実装することもできます。

その場合は、@keyframesルールとanimationプロパティを使って以下のように記述します。

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

.class-name {
  animation: rotate-animation 3s infinite;
}

この例では、3秒かけて360度回転するアニメーションが無限に繰り返されます。

●ステップ4:回転アニメーションのカスタマイズ

回転アニメーションをカスタマイズする方法も紹介します。

例えば、アニメーションの速度を変更したり、繰り返し回数を指定したりできます。

次の例では、2秒かけて180度回転し、アニメーションは5回繰り返されます。

.class-name {
  animation: rotate-animation 2s 5;
}

●ステップ5:回転アニメーションのタイミングを調整する

回転アニメーションをマウスオーバーやクリック時に実行する方法もあります。

次の例では、マウスオーバー時に回転アニメーションが実行されます。

.class-name:hover {
  animation: rotate-animation 3s infinite;
}

●ステップ6:3D回転の実装

3D回転を実装するには、rotateX()rotateY()rotateZ()関数を使用します。

次の例では、X軸とY軸を中心に45度ずつ回転させています。

.class-name {
  transform: rotateX(45deg) rotateY(45deg);
}

●ステップ7:3D回転アニメーションの実装

3D回転もアニメーションとして実装できます。

次の例では、X軸とY軸を中心に360度ずつ回転するアニメーションが実行されます。

@keyframes rotate3d-animation {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.class-name {
  animation: rotate3d-animation 3s infinite;
}

まとめ

本記事では、CSSを用いた回転効果の実装方法を初心者向けに徹底解説しました。

この記事が参考になりましたら幸いです。