360度旋转相册
按住鼠标可以拖动，有惯性效果。展示图片的话，把li背景换成图片即可，要添加或删除一些的话，自己调整一下translateZ,和景深perspective即可。假如你看不到3D效果，换浏览器吧大兄弟！！没做兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul{padding: 0;margin:0;}
body{overflow: hidden;background-color: #000;}
li{list-style: none;}
.content{perspective: 1000px;}
.box{position: relative; width: 120px;height: 200px;margin:150px auto;transform-style: preserve-3d;transform:rotateX(-10deg); -webkit-touch-callout: none;-webkit-user-select: none ; -khtml-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ;cursor:default;}
.box li{position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
</style>
</head>
<body>
<div class="content">
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var colors = ["#69D2E7", "#E20049", "#19215E", "#F38630", "#FA6900", "#FF4E50", "#F9D423", "#FFB6FF", "#474168", "#6ACAFC", "#B1AD25", "#13445A"];
var Ali = [].slice.call(document.querySelectorAll('li'),0);
var Obox = document.querySelector('.box');
var rotateY = 0;
var rotateX = 0;
var dX,dY;
var Time =0;
var deg = 360/Ali.length;
Ali.forEach(function (dom,index) {
dom.style.backgroundColor = colors[index];
dom.style.transform = "rotateY("+(deg*index)+"deg) translateZ(350px)";
dom.style.zIndex = "-"+index;
dom.style.transition = "all .8s "+index*0.1+"s";
})
document.onmousedown = function(e){
var e = e || window.event;
var oldX = e.clientX;
var oldY = e.clientY;
clearTimeout(Time);
this.onmousemove = function(e){
var e = e || window.event;
dX = e.pageX-oldX;
dY = e.pageY-oldY;
rotateX += dY*0.15;
rotateY += dX*0.1;
Obox.style.transform = "rotateX("+rotateX+"deg)"+" rotateY("+rotateY+"deg)";
oldX = e.clientX;
oldY = e.clientY;
}
this.onmouseup= function(){
this.onmousemove = null;
deg = 0;
Time = setTimeout(function(){
if(Math.abs(dX)>0.01 || Math.abs(dY)>0.01){
rotateX += dY*0.15;
rotateY += dX*0.1;
Obox.style.transform = "rotateX("+rotateX+"deg)"+" rotateY("+rotateY+"deg)";
dX *= 0.9;
dY *= 0.9;
Time = setTimeout(arguments.callee,1000/30);
}
},1000/30);
this.onmouseup = null;
}
}
}
</script>
</body>
</html>
