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