CSSアニメーションで要素を回転させる方法

1. CSSのtransformプロパティと@keyframesを使用する方法:

@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.element {
  animation: rotateAnimation 2s infinite linear;
}

このコードでは、rotateAnimationという名前のキーフレームアニメーションを定義しています。0%の時点では要素は0度回転し、100%の時点では360度回転します。.elementクラスにrotateAnimationアニメーションを2秒間、無限に繰り返し、線形に実行するように指定しています。

2. CSSのtransitionプロパティとtransformの変更をトリガーする方法:

.element {
  transition: transform 0.3s ease-in-out;
}
.element:hover {
  transform: rotate(180deg);
}

このコードでは、.elementクラスにtransformプロパティに対するトランジションを設定しています。要素にカーソルを合わせると、transformプロパティが変更されて要素が180度回転します。

3. CSSのtransformプロパティとJavaScriptを組み合わせる方法:

.element {
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}
document.querySelector('.element').addEventListener('click', function() {
  this.style.transform = 'rotate(180deg)';
});

このコードでは、.elementクラスに初期状態としてrotate(0deg)を設定しています。JavaScriptのclickイベントリスナーを使用して要素がクリックされた場合に、transformプロパティがrotate(180deg)に変更されるようにしています。

これらはCSSを使用して要素を回転させるための一般的な方法です。適用したい具体的なシナリオや要件に応じて、これらの方法を選択してください。