3D dynamic album

Free to do nothing, just write a 3D drag and drop album, pictures can be freely changed, mainly to learn the basis of js! Let's see the effect first. Of course, it's static. You can drag and drop it. Talk less nonsense. Above:

First of all, of course, we should learn layout. If we don't know the layout, we can't do it at all! The layout is based on the DIV in the middle, and then the style is written. The specific layout is not clear. I hope I can understand the code!
CSS style:

*{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;
			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 part:

<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>

Part JS:

//The most important part
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;/*Find the distance difference between two movements*/
				sY = newY - lY;
				
				rotateX -= sY*0.2; 
				rotateY += sX*0.1;
				
				oWrap.style.transform=" rotateX("+rotateX+"deg) rotateY("+rotateY+"deg)";

				//When the new value runs out, it becomes the old value
				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);
			}
		}

Well, such a handsome 3D drag and drop album will be completed successfully!!