CSSを使用したイメージの回転アニメーションの作成方法

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

この例では、@keyframesディレクティブを使用して、spinという名前のアニメーションを定義しています。0%から100%までの間で、transformプロパティを使用してイメージを回転させています。最後に、.imageクラスにanimationプロパティを追加して、アニメーションを適用しています。

方法2: CSSのtransformプロパティを使用する方法 もう一つの方法は、単純にCSSのtransformプロパティを使用してイメージを回転させる方法です。

.image {
  transform: rotate(45deg);
  transition: transform 1s;
}
.image:hover {
  transform: rotate(180deg);
}

この例では、.imageクラスにtransformプロパティを追加して、イメージを回転させています。また、transitionプロパティを使用して、回転が滑らかに行われるように設定しています。さらに、:hover疑似クラスを使用して、マウスがイメージの上にあるときに追加の回転を適用しています。

これらの方法を使用することで、イメージの回転アニメーションを実装することができます。適切な方法を選択し、ウェブサイトやブログに適用してみてください。