<!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>