效果圖如下：
代碼如下：
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
background:#1e1e1f;
overflow:hidden;
}
.box{
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform:rotateX(-20deg) rotateY(0deg);
}
.box img{
width: 300px;
height: 200px;
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 100px);
border: 5px solid #ffffff;
user-select: none;
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);
}
#wrap p{
width: 1200px;
height: 1200px;
background:-webkit-radial-gradient(center center,600px 600px,rgba(244,23,234,0.2),rgba(0,0,0,0));
position: absolute;
top:100%;left:50%;
margin-top: -600px;
margin-left: -600px;
border-radius:600px;
transform:rotateX(90deg);
}
</style>
</head>
<body >
<div class="box" id="wrap">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<p></P>
</div>
</body>
<script>
setTimeout(init,100);
function init(){
var imgArray = document.getElementsByTagName('img');
var deg = 360/imgArray.length;//單位度數
[].forEach.call(imgArray,function(node,index){
// console.log(index*deg);//每張圖片應該旋轉的度數
node.style.transform = "rotateY("+index*deg+"deg)translatez(350px)";//賦予給圖片，並撐開350px
node.style.transition = "1s "+(imgArray.length - index)*0.11+"s";
});
var newX,newY,pervX,pervY,minusX,minusY;
var roY = 0 , roX = -10;
var oWrap = document.getElementById("wrap");//通過id獲取元素
var timer;
// 拖拽：三個事件-按下 移動 擡起
//按下
document.onmousedown = function(ev){
ev = ev || window.event;
//鼠標按下的時候，給前一點座標賦值，爲了避免第一次相減的時候出錯
lastX = ev.clientX;
lastY = ev.clientY;
//移動
this.onmousemove = function(ev){
ev = ev || window.event;
clearInterval( timer );
nowX = ev.clientX; // clientX 鼠標距離頁面左邊的距離
nowY = ev.clientY; // clientY ………………………………頂部………………
//當前座標和前一點座標差值
minusX = nowX - lastX;
minusY = nowY - lastY;
//更新wrap的旋轉角度，拖拽越快-> minus變化大 -> roY變化大 -> 旋轉快
roY += minusX*0.2; // roY = roY + minusX*0.2;
roX -= minusY*0.1;
oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)';
/*
//生成div，讓div跟着鼠標動
var oDiv = document.createElement('div');
oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';
this.body.appendChild(oDiv);
*/
//前一點的座標
lastX = nowX;
lastY = nowY;
}
//擡起
this.onmouseup = function(){
this.onmousemove = null;
timer = setInterval(function(){
minusX *= 0.95;
minusY *= 0.95;
roY += minusX*0.2; // roY = roY + minusX*0.2;
roX -= minusY*0.1;
oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)';
if ( Math.abs(minusX)<0.1 && Math.abs( minusY )<0.1 )
{
clearInterval( timer );
}
console.log( minusX );
},13);
}
return false;
}
};
</script>