CSS:CSS3中perspective的应用，实现旋转木马效果

今天复习了一下CSS3，CSS3透视效果：perspective

perspective也可以理解为视角，就是你从哪个角度去看物体，你的角度不同物体呈现出的样子是不一样的，横看成林侧成峰嘛。要是没有视角这个东东，浏览器里面不管你怎么旋转拉伸都没有一丁点的3D感~

CSS3中的3D坐标系如下图所示：

X,Y轴就跟普通的直角坐标系一样，Z轴垂直于你的屏幕，当你在Z轴上移动的时候物体就会放大缩小了。

perspective:number

perspective属性使用起来非常方便，后面直接跟视距就好了，比如：perspective:500,不用带上px后缀，不过在不同的浏览器中webkit,o等前缀还是要的，毕竟大统一时代还没有来临嘛~

理解perspective有一点非常关键，就是你作为视窗的物体，不能同时还是被观察的，否则可能达不到你想要的效果

#div1{background:#666;width:300px;height:200px;margin:50px auto;-webkit-perspective:600;-webkit-transform:rotateY(45deg);}

这里想要观察一个灰色矩形的3D旋转效果，可惜毫无立体感。因为你把视角属性写在你的被观察物体里了，我们改一下：

#container{-webkit-perspective:600;-webkit-perspective-origin:50% 50%;}

#img1{-webkit-transform:rotateY(45deg);}

<div id="container">    <img id="img1" src="images/prettys/py.jpg" />    </div>

我们先设置了一个容器，然后给容器赋上视角属性，视距600，接着旋转图片，怎么样，3D效果很明显吧~

说到这，我们通过一个旋转木马Demo来练习一下，理论的东西不经过实践是完全记不住的，虽然很多时候我实践过了还是忘。。

Demo的演示在这里，大神的作品：http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html

首先9张图片准备好，咱也整9个美女~编号1,2...9。然后图片得是绝对定位的，把它们都钉到同一个中心重叠起来。怎么让9张图围城一个圈呢，这里就要用到translateZ属性了，意思就是在Z轴上移动，使用方法也很简单：

transform:translateZ(100px); 在Z轴上正方向移动100px，这样你看起来图就会大了不少，离你更近了当然变大啦。光在Z轴上移动也不够啊，还得配合rotateY属性，rotate是旋转意思，就是先绕着Y轴旋转一定角度，然后再沿着Z轴平移。9张图的样式应该是这样的：

img:nth-child(1) { -webkit-transform: rotateY(   0deg ) translateZ(400px);}img:nth-child(2) { -webkit-transform: rotateY(  40deg ) translateZ(400px);}img:nth-child(3) { -webkit-transform: rotateY(  80deg ) translateZ(400px);}img:nth-child(4) { -webkit-transform: rotateY( 120deg ) translateZ(400px);}img:nth-child(5) { -webkit-transform: rotateY( 160deg ) translateZ(400px);}img:nth-child(6) { -webkit-transform: rotateY( 200deg ) translateZ(400px);}img:nth-child(7) { -webkit-transform: rotateY( 240deg ) translateZ(400px);}img:nth-child(8) { -webkit-transform: rotateY( 280deg ) translateZ(400px);}img:nth-child(9) { -webkit-transform: rotateY( 320deg ) translateZ(400px);}

9张图，隔40度一张不围城圈了嘛，接着再沿着它们各自的Z轴平移一定距离，注意是各自的Z轴，当我们旋转之后其实是把它们独立的坐标系给改变了，所以Z轴也就不是垂直屏幕啦，这张图能很好地解释这一点：

红色虚线就意思每张图片他们自己的Z轴，只要移动半径r的长度就能到达它们各自应该到的地方啦~移动具体多少其实可以多试试，找到自己感觉最合适的距离就行。图片和容器可以这么写：

#container{margin:100px auto;-webkit-perspective-origin:50% 10%;-webkit-perspective:800;}img{width:240px;height:150px;position:absolute;left:50%;margin-left:-120px;-webkit-transition:-webkit-transform 1s ease;}

 <div id="container">        <img src="images/1.jpg" />            <img src="images/2.jpg" />            <img src="images/3.jpg" />            <img src="images/4.jpg" />            <img src="images/5.jpg" />            <img src="images/6.jpg" />            <img src="images/7.jpg" />            <img src="images/8.jpg" />            <img src="images/9.jpg" />        </div>

接下来的任务就是让木马转起来了~基本思想就是让每张图的旋转角度不断地加40，不用担心数字太大，计算机的处理能力是很强大的，不过你要是转个不停超过number类型最大值还是不太好。你还是对360取个余吧。代码很简单，可以像这样：

window.onload=function(){var imgs = document.querySelectorAll("img");var index = 1;document.getElementById("move").onclick=function(){for(var i=0;i<imgs.length;i++){var styles = imgs[i].style;styles.webkitTransform = "rotateY("+((-index+i)*40)+"deg) translateZ(400px)";styles.zIndex = 0;}imgs[(index-1)%9].style.zIndex = 10;imgs[(index)%9].style.zIndex = 10;imgs[(index+1)%9].style.zIndex = 5;imgs[(index+7)%9].style.zIndex = 5;index++;};};

获取到所有的图片元素，然后遍历一下依次加上40度就完事了，至于动画效果就交给transition属性了，js跟css搭配使用效果还是非常棒的~上面对zIndex的设置不能忽视，它保证前面的图片总能遮住背后的，不然透过去看肯定要出问题啦。