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.οnlοad=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.οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=function(){
document.οnmοusemοve=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>
