css3立体旋转

  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>