本篇内容介绍了“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>“CSS3怎么实现头像旋转效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注天达云网站，小编将为大家输出更多高质量的实用文章！