HTMLで画像を回転する方法

HTML で画像を回転する方法: まずファイルに画像を追加し、HTML ファイルに anim クラスの div を追加します。次に、anim のスタイルを設定し、背景画像を追加します。次に、マウス ホバー イベントを追加します。 ;最後に回転アニメーションをループするように[rot_test]を設定します。

#このチュートリアルの動作環境: Windows7 システム、html5 バージョン、DELL G3 コンピューター。

HTML で画像を回転する方法:

1. フォルダー内にテスト用の HTML ファイルを作成し、それを img 画像として配置します。

#2. html ファイルに anim クラスの div を追加します。

3. アニメーションのスタイルを設定し、背景画像を追加します。

4. 次に、マウス ホバー イベントを追加し、マウスが div イメージに移動したときに

rot_test ループ回転アニメーションを再生します。

animation:rot_test 3s infinite linear

5、

rot_test の回転アニメーションは、transform:rotate() を通じて実装され、0 度から 360 度までループします。回転アニメーション。

#6. ブラウザでテスト ページを開くと、マウスを上に動かすと画像が回転します。

関連する学習に関する推奨事項: html ビデオ チュートリアル

以上がHTMLで画像を回転する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。