鼠标悬停图片动态旋转扩大或缩小

Sublime text 2

电脑

既然是在网页上实现的效果，那么网页的架构必然是要先完成的，小编的架构就是两个div，里面包含着五个图片（引用图片时记得路径正确），页面效果如图二；

添加一下基本的 css 样式，width 和  height 控制宽度和高度，margin 这个属性控制  div  移动到页面中间；

然后我们看一下 transform：rotate（）这个效果，施加这个属性的可以旋转，正值是顺时针旋转，负值是逆时针旋转；

我们看一下两个属性一起用控制缩小的效果（ scale（0.1）有点小看不清，图二不是0.1倍的效果）

之后就是动态的关键属性  transition 这个属性，需要提前设置在选择其中；然后效果就实现了（图二无法做出动图，所以大家将就看看，样式源码是图三）

仅作分享；

transition 和 transform 属性是 H5的属性