瞅我干啥？

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::

3d旋转 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7     *{
  8         padding:0;
  9         margin:0;
 10         list-style: none;
 11     }
 12     body{
 13         overflow: hidden;
 14         background: #000;
 15     }
 16     #box{
 17         width:100px;
 18         height:85px;
 19         position: absolute;
 20         top:50%;
 21         left:50%;
 22         margin:-200px 0 0 -67px;
 23         transform-style: preserve-3d;
 24         transform:perspective(1500px) rotateX(-15deg);
 25     }
 26     ul li{
 27         position: absolute;
 28         top:0;
 29         left:0;
 30         width:100%;
 31         height:100%;
 32         background: url(img/1.jpg) no-repeat;
 33         background-size:contain;
 34         border-radius: 10px;
 35         box-shadow: 0px 0px 10px 4px #fff;
 36         
 37         transform: perspective(1500px) rotateY(0deg) translateZ(0px);
 38         
 39 
 40         -webkit-box-reflect:below 20px linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.4));
 41     }
 42     </style>
 43     <script>
 44     window.onload=function(){
 45         var oBox=document.getElementById('box');
 46 
 47         var N=9;
 48         for (var i = 0; i <N; i++) {
 49             var oLi=document.createElement('li');
 50             oLi.style.backgroundImage='url(img/'+(i+1)+'.jpg)';
 51 
 52             (function(obj,index){
 53                 setTimeout(function(){
 54                     obj.style.transform='perspective(1500px) rotateY('+index*360/N+'deg) translateZ(300px)';
 55                 },0)
 56             })(oLi,i);
 57 
 58             oLi.style.transition='1s all ease '+200*(N-i)+'ms';
 59             oBox.appendChild(oLi);
 60         }
 61         
 62 
 63         //键盘
 64         var aLi=oBox.children;
 65         //检测发牌结束
 66         
 67         aLi[0].addEventListener('transitionend',function(){
 68             for (var i = 0; i < aLi.length; i++) {
 69                 aLi[i].style.transition='none';
 70                 d=Math.abs(Math.abs((i*360/N)%360)-180)/180;
 71                 if(d<0.3){
 72                     d=0.3;
 73                 }
 74                 aLi[i].style.opacity=d;
 75             }
 76         },false)
 77 
 78 
 79         var y=0;
 80         var x=0;
 81 
 82         var lastX=0;
 83         var lastY=0;
 84 
 85         var speedX=0;//绕着X轴旋转的速度
 86         var speedY=0;//绕着Y轴旋转的速度
 87 
 88         var timer=null;
 89         document.onkeydown=function(ev){
 90             switch(ev.keyCode){
 91                 case 37:
 92                     y--;
 93                     break;
 94                 case 39:
 95                     y++;
 96                     break;
 97                 case 38:
 98                     x++;
 99                     break;
100                 case 40:
101                     x--;
102                     break;
103             }
104 
105             move(x,y);
106         };
107         document.onmousedown=function(ev){
108             clearInterval(timer);
109             var disX=ev.clientX-y;
110             var disY=ev.clientY-x;
111             document.onmousemove=function(ev){
112                 speedX=ev.clientY-lastY;
113                 speedY=ev.clientX-lastX;
114 
115                 lastX=ev.clientX;
116                 lastY=ev.clientY;
117                 x=ev.clientY-disY;
118                 y=ev.clientX-disX;
119                 //赋值
120                 move(-x/4,y/4);
121             };
122             document.onmouseup=function(){
123                 timer=setInterval(function(){
124                     speedX*=0.95;
125                     speedY*=0.95;
126                     x+=speedX;
127                     y+=speedY;
128                     move(-x/4,y/4);
129 
130                     if(Math.abs(speedX)<1 && Math.abs(speedY)<1){
131                         clearInterval(timer);
132                     }
133 
134                 },30)
135                 document.onmouseup=null;
136                 document.onmousemove=null;
137             };
138             return false;
139         };
140 
141         function move(x,y){
142             for(var i=0;i<aLi.length; i++){
143                 aLi[i].style.transition='none';
144                 aLi[i].style.transform='perspective(1500px) rotateY('+(i*360/N+y)+'deg) translateZ(300px)';
145 
146                 d=Math.abs(Math.abs((i*360/N+y)%360)-180)/180;
147                 //aLi[i].innerHTML=d;
148                 if(d<0.3){
149                     d=0.3;
150                 }
151                 aLi[i].style.opacity=d;
152             }
153             oBox.style.transform='perspective(1500px) rotateX('+(x-15)+'deg)';
154         }
155     };
156     </script>
157 </head>
158 <body>
159     <ul id="box">
160         <!-- <li></li> -->
161     </ul>
162 </body>
163 </html>

 

posted on 2016-09-04 22:07  瞅我干啥？  阅读(158)  评论(0)    收藏  举报