先看看效果（单身狗请做好心理准备）：http://www.yewu233.com/gift/gift.html
我叫掏粪
特效不需要任何JS代码，只需要几个css3属性，分别是
- transform:rotate(0deg); //旋转角度 90deg就是旋转90度 上面的效果没有旋转但是下面会讲
- transform:scale(1); //缩放倍数 1即原大小
- transition:1s; //使对次元素的操作在1s内完成 这样如果缩放的话就会越来越大有动画的效果
- z-index: 1; //堆叠顺序，数字越大元素越在上层
OK 就这几个，我们用两张图片示范。先看看HTML结构
HTML结构
对于这两个图片，我们要进行绝对定位，然后用transform中的rotate旋转一下，旋转角度不要一样，否则上面的图片把下面的图片全盖住了，我这样对这两个图片进行了修饰。
对两张图片的css设置
然后对img做一点修饰
img的修饰
-webkit-是safari、chrome私有属性，-moz-是火狐的私有属性，这样写是为了兼容浏览器。
然后我们对img标签添加hover属性就行了 在hover下缩放倍数大一点，层数设置大一点，旋转角度改为0度，由于img的transition:1s;属性，它们均会在1s内完成，就变成了动画。
鼠标移上时
为了让图片更有立体感，加了一句box-shadow让它有个阴影。
自己试着用两张图片做一下，很简单的，动动手这个特效就学会了。####
我叫掏粪，立志做一名前端工程师的计算机大一男，欢迎萌妹子勾搭我~
新浪微博ID：我叫掏粪i
觉得好的朋友点个赞(≧▽≦)/
网友评论