Github源码地址

效果：

代码思路：

1.添加图片到适宜的位置

2.找出中间那张图片的位置，将这张图片命名为中间图片，左边为前图片，右边为后图片(命名不强制）

3.中间的图片正放，两旁的图片进行适当的角度调整

4.计算出每张图片离窗口左边的距离

5.点击某张图片时，将图片离窗口左边的值进行统一的改变

6.将点击的那张图片改为中间图片，左边的图片统一改为前面，右边的图片统一改为后面

知识点：

1.将图片设置为3D效果，并调整为站在800px的距离进行观看

-webkit-transform-style:preserve-3d;

-webkit-perspective:800px;

2.向下的倒影效果：

-webkit-box-reflect:below 0

3.渐变效果：开始位置，开始颜色，结束颜色

-webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,.5));

rgba-红，绿，蓝，透明度

4.准换时间效果：-webkit-transition:.6s

5.将图片沿着Y轴旋转，向Z轴位移

transform:rotateY(45deg)     translateZ(-100px)

6.要达到自动搜索引擎真正能方便地搜索到你的网页

<meta name="Keywords" content="">

<meta name="Description" content="" />