1 <!DOCTYPE HTML>
2 <html onselectstart=‘return false‘>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5 <meta name="keywords" content="" />
6 <meta name="description" content="" />
7 <title>3D拖拽效果</title>
8 <style type="text/css">
9 *{ margin:0; padding:0;}
10 body{ background:#000; width:100%; height:100%; overflow:hidden}
11 #wrap{ width:133px; height:200px; margin:200px auto 0;
12 position:relative;
13 transform-style:preserve-3d;
14 transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
15 }
16 #wrap ul li{
17 list-style:none;
18 width:120px;
19 height:180px;
20 position:absolute;
21 top:0;left:0;
22 border-radius:3px;
23 box-shadow:0 0 10px #fff;
24 background-size:100%;
25
26 transform:rotateY(0deg) translateZ(0px);
27 -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);
28 }
29 #wrap p{ width:700px; height:700px; position:absolute; border-radius:100%;
30 left:50%; top:100%; margin-left:-350px; margin-top:-350px;
31 background:-webkit-radial-gradient(center,rgba(50,50,50,1),rgba(0,0,0,0));
32 transform:rotateX(90deg);}
33 </style>
34
35 </head>
36 <body>
37 <div id="wrap">
38 <ul>
39 <li style="background-image:url(img/1.jpg);"></li>
40 <li style="background-image:url(img/2.jpg);"></li>
41 <li style="background-image:url(img/3.jpg);"></li>
42 <li style="background-image:url(img/4.jpg);"></li>
43 <li style="background-image:url(img/5.jpg);"></li>
44 <li style="background-image:url(img/6.jpg);"></li>
45 <li style="background-image:url(img/7.jpg);"></li>
46 <li style="background-image:url(img/8.jpg);"></li>
47 <li style="background-image:url(img/9.jpg);"></li>
48 <li style="background-image:url(img/10.jpg);"></li>
49 <li style="background-image:url(img/11.jpg);"></li>
50 </ul>
51 <p></p>
52 </div>
53
54 <script src="js/jquery-1.11.3.min.js"></script>
55 <script>
56 $(function(){
57 var oL = $(‘#wrap ul li‘).size();
58 var Deg = 360/oL;
59 var xDeg = 0,yDeg = -10,xs,ys,p=null;
60
61 for (var i=oL-1;i>=0;i--)
62 {
63
64 $(‘#wrap ul li‘).eq(i).css({
65 transition:"1s "+(oL-i)*0.15+"s transform,.5s "+(1+oL*0.15)+"s opacity",
66 ‘transform‘:‘rotateY(‘+Deg*i+‘deg) translateZ(350px)‘
67 });
68 }
69
70
71 $(document).mousedown(function(e){
72 clearInterval(p);
73 var x1 = e.clientX;
74 var y1 = e.clientY;
75 $(this).bind(‘mousemove‘,function(e){
76 xs = e.clientX - x1;
77 ys = e.clientY - y1;
78 x1 = e.clientX;
79 y1 = e.clientY;
80 xDeg += xs*0.3;
81 yDeg -= ys*0.1;
82 $(‘#wrap‘).css(‘transform‘,"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
83 });
84 }).mouseup(function(){
85 $(this).unbind(‘mousemove‘);
86 p = setInterval(function(){
87 if(Math.abs(xs)<0.5&&Math.abs(ys)<0.5){clearInterval(p)};
88 xs = xs*0.95;
89 ys = ys*0.95
90 xDeg += xs*0.3;
91 yDeg -= ys*0.1;
92 $(‘#wrap‘).css(‘transform‘,"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
93 },30);
94 });
95
96 });
97 </script>
98 </body>
99 </html>
效果图：
时间： 2024-11-13 23:17:58