在HTML中使图片旋转的方法：首先在文件中添加图片，并在html文件中添加class为anim的div；然后设置anim的样式，并添加背景图片；接着添加鼠标hover事件；最后设置【rot_test】循环旋转动画。
/2021/03/c2dbe1ad.jpg
本教程操作环境：windows7系统、html5版，DELL G3电脑。
在HTML中使图片旋转的方法：
1、在文件夹中创建一个test的html文件，并放如一张img图片。
/2021/03/8460f848.png" /2021/03/8460f848.png" alt="0dd033dcc91f9fee2cb4e17df3a564f.png
2、在html文件中添加class为 anim 的div。
/2021/03/2587a56d.png" /2021/03/2587a56d.png" alt="75259c08d941f07ea24878aa83a08d3.png
3、设置anim的样式，并添加背景图片。
/2021/03/07f85a39.png" /2021/03/07f85a39.png" alt="e2f08ca29def780718604e6919ad2a0.png
4、接着添加鼠标hover事件，在鼠标移动到div图片上面播放rot_test循环旋转动画。
animation:rot_test 3s infinite linear
/2021/03/04b94ada.png" /2021/03/04b94ada.png" alt="153d792a6234bb34366d424584117f1.png
5、rot_test的旋转动画是通过 transform:rotate() 实现的，从0到360度循环旋转动画。
/2021/03/199f6486.png" /2021/03/199f6486.png" alt="2a9732304509376b4a163e669dcd84f.png
6、现在浏览器打开test页面，鼠标移动上去就会图片就会旋转了。
/2021/03/aa5cb8b0.png" /2021/03/aa5cb8b0.png" alt="2dc4c26f73befe60b24093f9336d66b.png
相关学习推荐：html视频教程
以上就是在HTML中如何使图片旋转的详细内容，更多请关注北冥有鱼其它相关文章！
本文转载自【PHP中文网】，希望能给您带来帮助，苟日新、日日新、又日新，生命不息，学习不止。
