css3立体旋转

攻城狮明轩技术 2022年11月7日

0 收藏 941 点赞 595 浏览 1935 个字

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
     #box{
         width:200px;
         height:200px;
         margin:100px auto;
         transform:perspective(800px) rotateY(0deg)  rotateX(0deg);
         transform-style: preserve-3d;
     }
     #box div{
         position: absolute;
         top:;
         left:;
         width:200px;
         height:200px;
     }
     #box .face{
         background: yellow;
         transform:translateZ(100px);
     }
     #box .back{
         background: #;
         transform:translateZ(-100px);
     }
     #box .top{
         background: #;
         transform:translateY(-100px) rotateX(-90deg);
     }
     #box .bottom{
         background: green;
         transform:translateY(100px) rotateX(-90deg);
     }
     #box .left{
         background: blue;
         transform:translateX(-100px) rotateY(90deg);
     }
     #box .right{
         background: pink;
         transform:translateX(100px) rotateY(90deg);
     }
     /* #box:hover{
         transform:perspective(800px) rotateY(360deg)  rotateX(360deg);
     } */
     </style>
     <script>
     window.onload=function(){
         var oBox=document.getElementById('box');
         var bLeft=false;
         var bRight=false;
         var bTop=false;
         var bBottom=false;
         //初始值
         var x=; //x轴旋转角度
         var y=;//y轴旋转角度
         //键盘
         /*document.onkeydown=function(ev){
             //打开开关
             switch(ev.keyCode){
                 case 37:
                     bLeft=true;
                     break;
                 case 38:
                     bTop=true;
                     break;
                 case 39:
                     bRight=true;
                     break;
                 case 40:
                     bBottom=true;
                     break;
             }
         };
         document.onkeyup=function(ev){
             //打开开关
             switch(ev.keyCode){
                 case 37:
                     bLeft=false;
                     break;
                 case 38:
                     bTop=false;
                     break;
                 case 39:
                     bRight=false;
                     break;
                 case 40:
                     bBottom=false;
                     break;
             }
         };         setInterval(function(){
             if(bLeft){
                 y-=4;
             }
             if(bBottom){
                 x-=4;
             }
             if(bTop){
                 x+=4;
             }
             if(bRight){
                 y+=4;
             }
             oBox.style.transform='perspective(800px) rotateY('+y+'deg) rotateX('+x+'deg)'
         },30)*/
         //鼠标
         document.onmousedown=function(ev){             var disX=ev.clientX-y;
             var disY=ev.clientY-x;
             document.onmousemove=function(ev){
                 x=disY-ev.clientY;
                 y=ev.clientX-disX;                 oBox.style.transform='perspective(800px) rotateY('+y+'deg) rotateX('+x+'deg)'
             };
             document.onmouseup=function(){
                 document.onmouseup=null;
                 document.onmousemove=null;
             };
             return false;
         };
     };
     </script>
 </head>
 <body>
     <div id="box">
         <div class="face"></div>
         <div class="back"></div>
         <div class="top"></div>
         <div class="bottom"></div>
         <div class="left"></div>
         <div class="right"></div>
     </div>
 </body>
 </html>