数码吧

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);
	}

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

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

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

说到这，我们通过一个旋转木马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);}

红色虚线就意思每张图片他们自己的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 >
        	<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>

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++;	
		};
	};