zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    一个优秀测试的自我修养
    二.自动化接口测试---用例设计思路、模版
    关于文件读写的一些笔记
    模块导入---如何在一个文件中导入其它模块,来调用它的变量、函数等,以节省代码量
    变量以及作用域----(局部变量、全部变量...)
    python连接mysql数据库
    python修改txt文件内容
    使用PyQt4写界面后台程序方法总结
    unresolved import 解决办法
    怎样使用pyinstaller打包
  • 原文地址:https://www.cnblogs.com/lixuekui/p/5832740.html
Copyright © 2011-2022 走看看