CSSで回転アニメーションを実現する方法を現役デザイナーが解説【初心者向け】

様々な回転方法と設定 アニメーションでよく見かける回転の動きについていくつか紹介します。 円上に動かす 一番よく見かける回転アニメーションです。ローディング画面などでよく使われています。 @keyframes rotation{ 0%{ transform:rotate(0);} 100%{ transform:rotate(360deg); } } 要素を平面で360度回転させます。 X軸で回転させる 鉄棒でくるくる回る動きのような感じです。 @keyframes rotation{ 0%{ transform:rotateX(0);} 100%{ transform:rotateX(360deg); } } X軸を基準に360度回転させます。 Y軸で回転させる X軸で回転させるのY軸バージョンです。 ご想像通り、XをYに変えるだけです。 @keyframes rotation{ 0%{