Talk is cheap, note is there , show you code.
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style media="screen"> body{ background-color: #000; } #wrap{ position: relative; /*the img size and make it get center*/ width: 130px; height: 200px; margin: 150px auto; transform-style: preserve-3d; /*perspective: 1000px;*/ /*make the whole items of wrap rotate by the axis */ /*perspective, which between 800 and 1000 seems better.*/ transform: perspective(1000px) rotateX(-10deg) rotateY(0deg); } #wrap>div{ position: absolute; transition:1s; } #wrap img{ /*delete the break between img*/ vertical-align: middle; /*x-offset y-offset spread-offset color*/ box-shadow: 0 0 10px #fff; } /*the inverted img was created*/ #wrap div div{ height: 200px; margin-top: 10px; /*reverse by y axis */ transform: scale(1,-1); background: linear-gradient(rgb(0,0,0) 40%,rgba(0,0,0,0)),url(img/10.jpg); } #wrap span{ display: block; width:1200px; height:1200px; position: absolute; /*center span*/ left:50%; top:50%; margin-left:-600px; margin-top:-600px; background: radial-gradient(rgb(50,50,50), rgba(0,0,0,0) 70%); transform: translateY(110px) rotateX(90deg); } </style> <script > window.onload=function () { let wrap=document.getElementById("wrap"); let divs=document.querySelectorAll("#wrap>div"); let refs=document.querySelectorAll("#wrap div div"); let rotate=360/divs.length; for(let i=0;i<divs.length;i++){ // the inverted img refs[i].style.background='linear-gradient(rgb(0,0,0) 40%,rgba(0,0,0,0)),url(img/'+(i+1)+'.jpg)'; // anonymous function and closure (function(i){ setTimeout(function(){ // After 2000, 1800, 1600 ... seconds to run transform(1s) // The first page was last runner divs[i].style.transform='rotateY('+i*rotate+'deg) translateZ(400px)'; },(divs.length-i)*200); })(i); } // When the fist img was run at the end position divs[0].addEventListener('transitionend',function(){ drag(); }); function drag(){ let curX=0; //init circle value let curY=-10; //init circle value let timer; document.onmousedown=function(ev){ clearInterval(timer); let startTime=new Date().getTime(); //when you mouse down let disX=ev.clientX; //the start point let disY=ev.clientY; //the start point /* * Last stop point * Every mouse down need set the lastXY */ let lastX=curX; let lastY=curY; /*note the speed*/ let speedX=0; let speedY=0; document.onmousemove=function(ev){ curX=lastX+(ev.clientX-disX)/10; curY=lastY+(disY-ev.clientY)/10; wrap.style.transform='perspective(1000px) rotateX('+curY+'deg) rotateY('+curX+'deg)'; //drag distance by the mouse move distance //so you need calc the speedX=(ev.clientX-disX)/100; speedY=(disY-ev.clientY)/100; }; document.onmouseup=function(){ document.onmousemove=null; let endTime=new Date().getTime(); //note the mouse up time if(endTime-startTime<300){ timer=setInterval(function(){ curX+=speedX; curY+=speedY; //friction force speedX*=0.95; speedY*=0.95; //stop condition if(Math.abs(speedX)<0.1 && Math.abs(speedY)<0.1){ clearInterval(timer); } wrap.style.transform='perspective(1000px) rotateX('+curY+'deg) rotateY('+curX+'deg)'; },16); } }; return false; }; } } </script> </head> <body> <div id="wrap"> <div><img src="img/1.jpg" /> <div> </div> </div> <div><img src="img/2.jpg" /> <div > </div> </div> <div><img src="img/3.jpg" /> <div > </div> </div> <div><img src="img/4.jpg" /> <div> </div> </div> <div><img src="img/5.jpg" /> <div> </div> </div> <div><img src="img/6.jpg" /> <div> </div> </div> <div><img src="img/7.jpg" /> <div> </div> </div> <div><img src="img/8.jpg" /> <div> </div> </div> <div><img src="img/9.jpg" /> <div> </div> </div> <div><img src="img/10.jpg" /> <div> </div> </div> <span></span> </div> </body> </html>