- 鼠标悬停图片旋转,是可以用css3的hover伪类来实现鼠标移入元素发生变化的这么一个效果,利用这一特性巧妙地给伪类添加css3的旋转动画,这样就摒弃掉烦人且复杂的js简单的就实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标悬停图片360°旋转</title>
</head>
<style>
body{
background: #727272;
}
.xuanzhuan{
width: 280px;
height: 280px;
margin: 0 auto;
background: url(1_weixin_44484452.jpg) no-repeat;
border-radius: 50%;
transition: transform 2s ease-out;
}
.xuanzhuan:hover{
transform: rotateZ(360deg);
}
</style>
<body>
<div class="xuanzhuan"></div>
</body>
</html>