【HTML・CSS】コピペOK！マウスを乗せたらくるっと回転するアニメーションのCSS

今回はHTML・CSS初心者向けに、『コピペOK！マウスホバーしたらくるっと回転するアニメーション』をCSSで設定する方法をご紹介します。

コピペするだけですが、一応コードを解説していきますので、HTML・CSS初心者の方も次からはコピペしなくても記述できるようになります。

それでは解説していきます。

マウスホバーで回転するアニメーション

まずは実際の動きを確認します。
アニメーションは下記のような動きになります。

想像のような動きになっていますでしょうか？

それでは設定するCSSをご紹介＆ご説明します。

CSSコード

設定するCSSは以下になります。
クラスは以下の通りでも変更しても大丈夫です。

.logo :hover{
  opacity: .7;
  transition: 3s;
  transform: rotateY(360deg);
}

簡単ですよね。
それでは解説していきます。

プロパティの解説

:hover

プロパティの解説としていますが、『:hover』は擬似クラスになります。

『クラス名 :hover』とすることでそのクラスを指定した要素の上にマウスがホバー(上に乗る)した時のCSSを指定できるようになります。

opacityプロパティ

『opacity』プロパティは、指定した要素の透明度の調節をします。

今回は『:hover{opacity: .7;}』としているので、１が通常のところからマウスホバーすることで若干薄くし、ホバーしていることがわかりやすくしています。

transitionプロパティ

『transition』プロパティは、ホバーした時のアニメーションの時間を指定するプロパティです。

今回『3s』としているので、３秒間でアニメーションの開始と終了を指定しています。

transformプロパティ

『transform』プロパティで『rotateY (360deg)』と指定し、横に360℃回転する指定をしています。

『rotateX』にしたら縦回転になるなどの調整が可能です。
お好きな動きに変えてください。

ちきんまさBLOG