<!DOCTYPE HTML>
<html onselectstart='return false'>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>3D拖拽效果</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ background:#000; width:100%; height:100%; overflow:hidden}
#wrap{ width:133px; height:200px; margin:200px auto 0;
position:relative;
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
}
#wrap ul li{
list-style:none;
width:120px;
height:180px;
position:absolute;
top:0;left:0;
border-radius:3px;
box-shadow:0 0 10px #fff;
background-size:100%; transform:rotateY(0deg) translateZ(0px);
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);
}
#wrap p{ width:700px; height:700px; position:absolute; border-radius:100%;
left:50%; top:100%; margin-left:-350px; margin-top:-350px;
background:-webkit-radial-gradient(center,rgba(50,50,50,1),rgba(0,0,0,0));
transform:rotateX(90deg);}
</style> </head>
<body>
<div id="wrap">
<ul>
<li style="background-image:url(img/1.jpg);"></li>
<li style="background-image:url(img/2.jpg);"></li>
<li style="background-image:url(img/3.jpg);"></li>
<li style="background-image:url(img/4.jpg);"></li>
<li style="background-image:url(img/5.jpg);"></li>
<li style="background-image:url(img/6.jpg);"></li>
<li style="background-image:url(img/7.jpg);"></li>
<li style="background-image:url(img/8.jpg);"></li>
<li style="background-image:url(img/9.jpg);"></li>
<li style="background-image:url(img/10.jpg);"></li>
<li style="background-image:url(img/11.jpg);"></li>
</ul>
<p></p>
</div> <script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
var oL = $('#wrap ul li').size();
var Deg = 360/oL;
var xDeg = 0,yDeg = -10,xs,ys,p=null; for (var i=oL-1;i>=0;i--)
{ $('#wrap ul li').eq(i).css({
transition:"1s "+(oL-i)*0.15+"s transform,.5s "+(1+oL*0.15)+"s opacity",
'transform':'rotateY('+Deg*i+'deg) translateZ(350px)'
});
} $(document).mousedown(function(e){
clearInterval(p);
var x1 = e.clientX;
var y1 = e.clientY;
$(this).bind('mousemove',function(e){
xs = e.clientX - x1;
ys = e.clientY - y1;
x1 = e.clientX;
y1 = e.clientY;
xDeg += xs*0.3;
yDeg -= ys*0.1;
$('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
});
}).mouseup(function(){
$(this).unbind('mousemove');
p = setInterval(function(){
if(Math.abs(xs)<0.5&&Math.abs(ys)<0.5){clearInterval(p)};
xs = xs*0.95;
ys = ys*0.95
xDeg += xs*0.3;
yDeg -= ys*0.1;
$('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
},30);
}); });
</script>
</body>
</html>
效果图：