CSS3实现头像旋转效果实例分享

来源：爱若养生

本文主要介绍了CSS3实现头像旋转效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

鼠标未放上效果：

鼠标放上之后旋转效果：

transition: all 2.0s;表示所有的属性变换在2秒内完成；

transform: rotate(360deg);表示图片旋转360度。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 img{
 border: #000 solid 2px;
 display: block;
 margin: 50px auto;
 border-radius: 50%;
 transition: all 2.0s;
 }
 img:hover{
 transform: rotate(360deg);
 }
 </style>
 </head>
 <body>
 <img src="img/03.jpg" />
 </body>
</html>