首页 > 代码库 > 旋转 3d

旋转 3d

2024-09-02 20:50:25   218人阅读

建议chorme浏览器浏览，有样式兼容性问题。

图片可以根据自己本地路径设置路径，js库引用jquery。

写的不好，多多建议，谢谢大家。

技术分享 
 1 <html onselectstart="return false;">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
 7     <style type="text/css">
 8     body {
 9         margin: 0;
10         padding: 0;
11     }
12     
13     body {
14         background: #000;
15     }
16     
17     #wrap {
18         width: 120px;
19         height: 180px;
20         margin: 200px auto 0;
21         position: relative;
22         transform-style: preserve-3d;
23         transform: perspective(800px) rotateX(-10deg);
24     }
25     
26     #wrap img {
27         width: 100%;
28         height: 100%;
29         border-radius: 10px;
30         position: absolute;
31         top: 0px;
32         left: 0px;
33         box-shadow: 0 0 10px #fff;
34         -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100% );
35         -moz-box-reflect:below 10px -moz-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100% );
36     }
37     </style>
38 </head>
39 
40 <body>
41     <div id="wrap">
42         <img src="img/1.jpg" alt="">
43         <img src="img/2.jpg" alt="">
44         <img src="img/3.jpg" alt="">
45         <img src="img/4.jpg" alt="">
46         <img src="img/5.jpg" alt="">
47         <img src="img/6.jpg" alt="">
48         <img src="img/7.jpg" alt="">
49         <img src="img/8.jpg" alt="">
50         <img src="img/9.jpg" alt="">
51         <img src="img/10.jpg" alt="">
52         <img src="img/11.jpg" alt="">
53     </div>
54     <script type="text/javascript">
55     $(function() {
56         var imgLen = $("#wrap img").size();
57         var rotateDeg = 360 / imgLen;
58         $("#wrap img").each(function(i) {
59             $(this).css(‘transform‘, ‘rotateY(‘ + i * rotateDeg + ‘deg) translateZ(350px)‘).attr(‘ondragstart‘,‘return false‘);
60         });
61 
62         var roY = 0,roX = -10,xN,yN;
63         $(document).mousedown(function(ev){
64             var x_ = ev.clientX;
65             var y_ = ev.clientY;
66             $(this).bind(‘mousemove‘,function(ev){
67                 var x = ev.clientX;
68                 var y = ev.clientY;
69 
70                 xN = x - x_;
71                 yN = y - y_;
72 
73                 roY += xN*0.2;
74                 roX -= yN*0.1;
75                 $("#wrap").css(‘transform‘,‘perspective(800px) rotateX(‘+roX+‘deg) rotateY(‘+roY+‘deg)‘);
76                 x_ = ev.clientX;
77                 y_ = ev.clientY;
78             });
79         });
80         $(document).mouseup(function(){
81             $(this).unbind(‘mousemove‘);
82             var play_ = setInterval(function(){
83                 xN = xN*0.95;
84                 yN = yN*0.95;
85                 if(Math.abs(xN)<0.5 && Math.abs(yN)<0.5){
86                     clearInterval(play_);
87                 };
88                 roY += xN*0.2;
89                 roX -= yN*0.1;
90                 $("#wrap").css(‘transform‘,‘perspective(800px) rotateX(‘+roX+‘deg) rotateY(‘+roY+‘deg)‘);
91             },30);
92         });
93     });
94     </script>
95 </body>
96 
97 </html>
View Code

直接需求代码的+qq：596023011

旋转 3d


联系
我们