CSSアニメーションで画像を回転させる

css

CSSのみで画像や図形などを回転させることができます。 回転はX軸方向、Y軸方向、Z軸方向にさせる事が可能です。

X軸方向に回転

キーフレームで回転方向を指定します。 今回は始点に0度、終点に360度(一回転)、X軸方向に回転を指定します。

そしてマウスオーバー時イベントにキーフレームで設定したイベントを指定します。
animation-durationはアニメーション処理の時間、animation-iteration-countはアニメーション処理の回数です。

@keyframes turnX{
  0%{transform:rotateX(0deg);}
  100%{transform:rotateX(360deg);}
}

#rX:hover{
  animation-name:turnX;
  animation-duration:3s;
  animation-iteration-count:1;
}

マウスを画像上に乗せるとX軸方向に回転します。

amaru

Y軸方向に回転

基本的な指定はX軸の回転とほぼ同じです。 rotateのみY軸方向への回転に変更します。

@keyframes turnY{
  0%{transform:rotateY(0deg);}
  100%{transform:rotateY(360deg);}
}

#rY:hover{
  animation-name:turnY;
  animation-duration:3s;
  animation-iteration-count:1;
}

マウスを画像上に乗せるとY軸方向に回転します。

amaru

Z軸方向に回転

基本的な指定はX軸の回転とほぼ同じです。 rotateのみZ軸方向への回転に変更します。

@keyframes turnZ{
  0%{transform:rotateZ(0deg);}
  100%{transform:rotateZ(360deg);}
}

#rZ:hover{
  animation-name:turnZ;
  animation-duration:3s;
  animation-iteration-count:1;
}

マウスを画像上に乗せるとZ軸方向に回転します。

amaru

Z軸方向への回転はボタン押下時などによく使います。 X・Y軸回転は個人的にはあまり使いませんが、面白い動きなので見栄えを重視した処理などにいいのではないでしょうか。

今回は画像を回転させましたが、CSSで描画した図形などでもよく使う動きです。 CSSで描画した画像をCSSで回転させれば負荷が軽くて済むので、賑やかしを置きたいが負荷はかけたくないなんて時に重宝します。

アマルウェブ HOME