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

       鼠标悬停触发结果，学过一些网页根本的读者应该知道，今天小编分享一个可以在鼠标悬停时动态扭转图片而且图片还可以扩年夜或者缩小的事例；

东西/原料

• Sublime text 2
• 电脑

方式/步调

1. 1

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

   
2. 2

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

   
3. 3

   然后我们看一下 transform:scale()的结果，如图二，可以看到施加这个属性的图片变年夜，变年夜的比例是 scale（） 括号中的数值节制的；

   
4. 4

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

   
5. 5

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

   
6. 6

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

   

注重事项

• 仅作分享；
• transition 和 transform 属性是 H5的属性