CSSによる画像回転ダイナミック効果の実現

CSSによる画像回転ダイナミック効果の実現
まず、回転を設定する必要があるdivのcssスタイルに次のコードを追加します.
たとえば、img 01というクラスセレクタに回転スタイルを追加し、animationプロパティ内で設定し、アニメーションを回転し、rotateをアニメーション名(カスタム名)、6 sを周期、linearを線形グラデーション(グラデーション解除効果)、infiniteを無限ループ、すなわちアニメーションの終了後に自動的に次のラウンドに進み、無限回転効果を実現します.

.img01{  
    display: block;
    animation: rotate 6s linear infinite;
}  

クラスセレクタを再定義したら、cssファイルに次のスタイルコードを追加する必要があります.
rotate対応クラスカスタムアニメーション名を選択します.Transformアトリビュートでは0度から360(時計回り)に回転するように設定されていますが、反時計回りに回転するには数値を逆さまにします.

@keyframes rotate{
	0%{
		transform: rotateZ(0deg);/* 0   */
	}
	100%{
		transform: rotateZ(360deg);/*360   */
	}
}

以上のコードを正しく追加すると、自動無限回転効果が得られます.