1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #box{ 8 200px; 9 height:200px; 10 margin:100px auto; 11 transform:perspective(800px) rotateY(0deg) rotateX(0deg); 12 transform-style: preserve-3d; 13 } 14 #box div{ 15 position: absolute; 16 top:0; 17 left:0; 18 200px; 19 height:200px; 20 } 21 #box .face{ 22 background: yellow; 23 transform:translateZ(100px); 24 } 25 #box .back{ 26 background: #996; 27 transform:translateZ(-100px); 28 } 29 #box .top{ 30 background: #234; 31 transform:translateY(-100px) rotateX(-90deg); 32 } 33 #box .bottom{ 34 background: green; 35 transform:translateY(100px) rotateX(-90deg); 36 } 37 #box .left{ 38 background: blue; 39 transform:translateX(-100px) rotateY(90deg); 40 } 41 #box .right{ 42 background: pink; 43 transform:translateX(100px) rotateY(90deg); 44 } 45 /* #box:hover{ 46 transform:perspective(800px) rotateY(360deg) rotateX(360deg); 47 } */ 48 </style> 49 <script> 50 window.onload=function(){ 51 var oBox=document.getElementById('box'); 52 var bLeft=false; 53 var bRight=false; 54 var bTop=false; 55 var bBottom=false; 56 //初始值 57 var x=0; //x轴旋转角度 58 var y=0;//y轴旋转角度 59 //键盘 60 /*document.onkeydown=function(ev){ 61 //打开开关 62 switch(ev.keyCode){ 63 case 37: 64 bLeft=true; 65 break; 66 case 38: 67 bTop=true; 68 break; 69 case 39: 70 bRight=true; 71 break; 72 case 40: 73 bBottom=true; 74 break; 75 } 76 }; 77 document.onkeyup=function(ev){ 78 //打开开关 79 switch(ev.keyCode){ 80 case 37: 81 bLeft=false; 82 break; 83 case 38: 84 bTop=false; 85 break; 86 case 39: 87 bRight=false; 88 break; 89 case 40: 90 bBottom=false; 91 break; 92 } 93 }; 94 95 setInterval(function(){ 96 if(bLeft){ 97 y-=4; 98 } 99 if(bBottom){ 100 x-=4; 101 } 102 if(bTop){ 103 x+=4; 104 } 105 if(bRight){ 106 y+=4; 107 } 108 oBox.style.transform='perspective(800px) rotateY('+y+'deg) rotateX('+x+'deg)' 109 },30)*/ 110 //鼠标 111 document.onmousedown=function(ev){ 112 113 var disX=ev.clientX-y; 114 var disY=ev.clientY-x; 115 document.onmousemove=function(ev){ 116 x=disY-ev.clientY; 117 y=ev.clientX-disX; 118 119 oBox.style.transform='perspective(800px) rotateY('+y+'deg) rotateX('+x+'deg)' 120 }; 121 document.onmouseup=function(){ 122 document.onmouseup=null; 123 document.onmousemove=null; 124 }; 125 return false; 126 }; 127 }; 128 </script> 129 </head> 130 <body> 131 <div id="box"> 132 <div class="face"></div> 133 <div class="back"></div> 134 <div class="top"></div> 135 <div class="bottom"></div> 136 <div class="left"></div> 137 <div class="right"></div> 138 </div> 139 </body> 140 </html>