CSS实现3D轮播效果

通过大牛张鑫旭的分享理解css 3D图片轮播效果 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

其实3D图片轮播就是将所有图片摆弄成一个立体的对象 然后进行旋转。

思路是：所有图片在一个容器内，设置图片的position为absolute，则所有图片将共用一个中心点。将容器旋转，即所有图片绕着共同中心点旋转，产生轮播效果。但是这里要注意将图片摆弄成一个3D对象，不然就会挤在一块。

图片3D对象实现：

1、首先，需要设置perspective属性才能实现我们想要的3D效果。其w3school的定义如下：

 该属性设置了观察者与3D元素的距离，z=0则是元素本来大小，>0则变大，<0则变小，跟我们观察现实生活中的物体是一样的。所以我们如果给图片设置了translateZ，图片的大小将会有所调整，在2D视平面上产生3D效果。如果不设置该属性，则z轴空间中的所有点将平铺到同一个2D平面中。

      perspective属性用在动画元素们的共同父辈元素上的话，则动画元素们的形态才会有所区分，显示出立体效果。

2、此外，还需设置属性transform-style：preserve-3d 表示3D透视，不设置的话，3D变换就会变成2D平面的。一般而言，该属性设置在3D变换元素的父元素上。

     页面的元素布局为：

为main设置 perspective:700px;为box设置 transform-style: preserve-3d;

3、假设有4张图片进行轮播，将其绕成一个圈，则每张图片绕Y轴偏转360/4=90deg。那么四张图片将会各自面向一侧。

img:nth-child(1) {transform:rotateY(0deg);}

img:nth-child(2) {transform:rotateY(90deg);}

img:nth-child(3) {transform:rotateY(180deg);}

img:nth-child(4) {transform:rotateY(270deg);}

 此时你发现所有图片还是堆叠在一块，如何让它们间隔距离呢，就是让它们朝着各自面对的方向朝前走（设置）。走的距离需要计算一下。

所以走的距离为图片宽度的一半，但这只会刚好使图片边界连在一块，可以再多走几步，使图片彼此之间隔开。

效果如下：

接下来只要设置其绕着Y轴旋转，就能实现轮播的效果啦。

4、这里实现了点击切换下一张图片的效果，通过简单的原生js来实现

这里的90就是图片偏转的角度。

5、最终实现的效果  https://github.com/Showingbun/nuomi/blob/master/carousel/carousel.html