最終更新日：2020.08.26
CSSだけで要素が回転するアニメーションを作成してみましょう！
コピペするだけで動く縦・横・全体の回転方法を紹介します。
CSSでは@keyframesでアニメーションのタイムラインを指定出来ます。
ここにいろいろ書くと拡大しながら回転したり、フェードインしたり表現できます。
今回は回転だけですが、アニメーションの方法についてはまたサンプルを作りたいなぁと思っています。
補足として古いスマホ端末(iOS 8.0以下と、Android 4以下)用に「-webkit-」のベンダープレフィックス付きの二重定義をしています。これはCSS3で実装予定の機能をブラウザ各社が先行して実装した機能を各ブラウザで使えるようにしたものです。古いWebkitブラウザ（Chrome、Safari）に対応させる場合は追加しておきましょう！
早速見てみる！
縦回転
コピー
@keyframes rotate-x{
0%{transform:rotateX(0deg);}
100%{transform:rotateX(360deg);}
}
@-webkit-keyframes rotate-x{
0%{-webkit-transform:rotateX(0deg);}
100%{-webkit-transform:rotateX(360deg);}
}
.★回転させたい要素★{
animation:rotate-x 2s infinite;
-webkit-animation:rotate-x 2s infinite;
}
結果
@keyframesを使って名前rotate-xはx軸(縦)を0から360度回転させるよと命令を出しています。
それを回転させたい要素側のanimationタグで名前rotate-xを呼び出して2s２秒かけてinfinite無限にアニメーションすると宣言しています。
横回転
コピー
@keyframes rotate-y{
0%{transform:rotateY(0deg);}
100%{transform:rotateY(360deg);}
}
@-webkit-keyframes rotate-x{
0%{-webkit-transform:rotateY(0deg);}
100%{-webkit-transform:rotateY(360deg);}
}
.★回転させたい要素★{
animation:rotate-y 2s infinite;
-webkit-animation:rotate-y 2s infinite;
}
結果
@keyframesを使って名前rotate-yはy軸(横)を0から360度回転させるよと命令を出しています。
それを回転させたい要素側のanimationタグで名前rotate-yを呼び出して2s２秒かけてinfinite無限にアニメーションすると宣言しています。
全回転
コピー
@keyframes rotate-z{
0%{transform:rotateZ(0deg);}
100%{transform:rotateZ(360deg);}
}
@-webkit-keyframes rotate-x{
0%{-webkit-transform:rotateZ(0deg);}
100%{-webkit-transform:rotateZ(360deg);}
}
.★回転させたい要素★{
animation:rotate-z 2s infinite;
-webkit-animation:rotate-z 2s infinite;
}
結果
@keyframesを使って名前rotate-zはz軸(全体)を0から360度回転させるよと命令を出しています。
それを回転させたい要素側のanimationタグで名前rotate-zを呼び出して2s２秒かけてinfinite無限にアニメーションすると宣言しています。
まとめ
:hoverと組み合わせたり、animation-delayを使って遅らせ表示したり、animation-iteration-countでループ回数を指定してみたり、アレンジ方法は無限大です。
楽しいアニメーションを効果的に使える場所も考えて実装してみてくださいね！