3D动态相册

3D动态相册

闲来没事做，就写一下3D拖拽相册吧，图片可自由更换，主要是学习js基础！先来看看效果吧，当然是静态的，可以拖拽，废话少说，上图：

首先当然是要学习布局，不知道布局的话，根本就下不了手！布局就是以中间的DIV为准，随后进行样式的书写，具体布局也说不清楚，希望能看得懂代码吧！
CSS样式：

*{margin: 0;padding: 0;}
		body{
			background: #000;
			overflow: hidden;
			user-select:none;
		}
		#perspective{
			perspective:800px;
		}
		#wrap{
			position: relative;
			width: 133px;
			height: 200px;
			margin: 150px auto;
			box-shadow: 0 0 8px #f9f;
			transform-style: preserve-3d;
			transform: rotateX(-15deg) rotateY(0deg);
		}
		#wrap .img{
			width: 133px;
			height: 200px;
			box-shadow: 0 0 8px #f9f;
			position: absolute;
			list-style: none;
		}
		#wrap img{
			position: absolute;
			width: 133px;
			height: 200px;
			filter: blur(1px);
			transition: 1s;
			-webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 100%);
		}
		#wrap img:hover{
			filter: blur(0px);
			transform: scale(1.2);
		}

body部分：

<div id="perspective">
		<div id="wrap">
			<div>
				<img src="images/1.jpg" alt="">
			</div>
			<li class="img">
				<img src="images/1.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/2.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/3.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/4.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/5.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/6.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/7.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/8.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/9.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/10.jpg" alt="">
			</li>
			<li class="img">
				<img src="images/11.jpg" alt="">
			</li>
		</div>
	</div>

JS部分：

//最重要的部分
var oImg = document.getElementsByClassName("img");
		var deg = 360/oImg.length;
		window.onload = function(){
			for(var i = 0; i < oImg.length;i++){
				oImg[i].style.transform = "rotateY("+deg*i+"deg) translateZ(350px)";
				oImg[i].style.transition = "1s "+(oImg.length-i)*0.1+"s";
			}
		}
		var newX,newY,sX,sY,lX,lY,rotateX = -15,rotateY = 0;
		var oWrap = document.getElementById("wrap");
		document.onmousedown = function(event){
			lX = event.clientX;
			lY = event.clientY;
			this.onmousemove = function(event){
				newX = event.clientX;
				newY = event.clientY;
				
				sX = newX - lX;/*求两次移动距离差*/
				sY = newY - lY;
				
				rotateX -= sY*0.2; 
				rotateY += sX*0.1;
				
				oWrap.style.transform=" rotateX("+rotateX+"deg) rotateY("+rotateY+"deg)";

				//当新的值用完就变成旧的值
				lX = newX;
				lY = newY;
			}
			this.onmouseup = function(event){
				this.onmousemove = null;
				var timer = setInterval(function(){
					sX *= 0.95;
					sY *= 0.95;
					
					rotateX -= sY*0.2; 
					rotateY += sX*0.1;
					
					oWrap.style.transform=" rotateX("+rotateX+"deg) rotateY("+rotateY+"deg)";
					
					if(Math.abs(sX) < 0.1 && Math.abs(sY) < 0.1){
						clearInterval(timer);
					}
				},13);
			}
		}

好了，这样一个帅气的3D拖拽相册就圆满完工了！！