css3 transform及原生态js完成电脑鼠标拖拽三d立方体

日期:2020-12-12 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

本文根据原生态JS,点一下恶性事件,电脑鼠标按下、电脑鼠标抬起和电脑鼠标挪动恶性事件,完成三d立方体的拖拽转动,并将转动角度即时的反映至页面上显示信息。
 
完成基本原理:根据获得电脑鼠标点一下显示屏时的座标和电脑鼠标挪动时的座标,来得到电脑鼠标在X轴、Y轴挪动的间距,将间距即时取值给transform特性。
 
从而根据更改transform:rotate特性值来做到三d立方体转动的实际效果:
 
HTML编码块:

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2.     <input type="button" class="open" value="点一下散开"/>  
  3.     <input type="text" class="xNum" value="0"/>//X轴转动角度   
  4.     <input type="text" class="yNum" value="0"/>//Y轴转动角度   
  5.     <input type="text" class="zNum"/>  
  6.     <div class="big_box">  
  7.         <div class="box">  
  8.             <span>1</span>  
  9.             <span>2</span>  
  10.             <span>3</span>  
  11.             <span>4</span>  
  12.             <span>5</span>  
  13.             <span>6</span>  
  14.         </div>  
  15.     </div>  
  16. </body>   

CSS编码块:

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.  body{cursorurl("img/openhand1.png"),auto;}   
  3.      .big_box{   
  4.             width500px;   
  5.             height500px;   
  6.             margin200px auto;   
  7.         }   
  8.   
  9.         .box{   
  10.             -webkit-transform-style: preserve⑶d;   
  11.             -moz-transform-style: preserve⑶d;   
  12.             -ms-transform-style: preserve⑶d;   
  13.             transform-style: preserve⑶d;   
  14.             transform-origin:100px 100px 00px;   
  15.             positionrelative;   
  16.             transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);   
  17.         }   
  18.         .box span{   
  19.             transition: all 1s linear;   
  20.   
  21.         }   
  22.         span{   
  23.             displayblock;   
  24.             positionabsolute;   
  25.             width200px;   
  26.             height200px;   
  27.             box-sizing: border-box;   
  28.             border:1px solid #999;   
  29.             /*opacity: 0.7;*/  
  30.             text-aligncenter;   
  31.             line-height200px;   
  32.             font-size60px;   
  33.             font-weight: 700;   
  34.             border-radius: 12%;   
  35.   
  36.         }   
  37.         .box span:nth-child(1){   
  38.             background-color: deepskyblue;   
  39.             transform-origin: left;   
  40.             transform: rotatey(⑼0deg) translatex(-100px);//左   
  41.         }   
  42.         .box span:nth-child(2){   
  43.             background-colorred;   
  44.             transform-origin: rightright;   
  45.             transform: rotatey(90deg) translatex(100px) ;//右   
  46.   
  47.         }   
  48.   
  49.         .box span:nth-child(3){   
  50.             background-colorgreen;   
  51.             transform-origin: top;   
  52.             transform: rotatex(90deg) translatey(-100px) ;//上   
  53.   
  54.         }   
  55.         .box span:nth-child(4){   
  56.             background-color#6633FF;   
  57.             transform-origin: bottombottom;   
  58.             transform: rotatex(⑼0deg) translatey(100px);//下   
  59.         }   
  60.         .box span:nth-child(5){   
  61.             background-color: gold;   
  62.             transform: translatez(-100px);//后   
  63.         }   
  64.         .box span:nth-child(6){   
  65.   
  66.             background-color#122b40;   
  67.             transform: translatez(100px);//前   
  68.         }   
  69.         .box:hover span{   
  70.   
  71.             opacity: 0.3;   
  72.         }   
  73.         .box:hover{   
  74.             animation-play-state:paused;//设定动漫中止   
  75.         }   
  76. </style>    

JS编码块:

JavaScript Code拷贝內容到剪贴板
  1. <script>   
  2.     move();   
  3.   
  4.     clickBox();   
  5.   
  6.     //电脑鼠标按下且挪动时开启,   
  7.   
  8.     function move(){   
  9.         var body = document.querySelector("body");   
  10.         var box = document.querySelector(".box");   
  11.         var xNum =document.querySelector(".xNum");   
  12.         var yNum =document.querySelector(".yNum");   
  13.         var x = 0,y = 0,z = 0;   
  14.         var xx = 0,yy = 0;   
  15.         var xArr = [],yArr = [];   
  16.         window.onmousedown = function (e) {//电脑鼠标按下恶性事件   
  17.             body.style.cursor = 'url("img/closedhand1.png"),auto';   
  18.             xArr[0] = e.clientX/2;//获得电脑鼠标点一下显示屏时的座标   
  19.             yArr[0] = e.clientY/2;   
  20.             window.onmousemove = function (e) {//电脑鼠标挪动恶性事件————当电脑鼠标按下且挪动时开启   
  21.                 xArr[1] = e.clientX/2;//获得电脑鼠标挪动时第1个点的座标   
  22.                 yArr[1] = e.clientY/2;   
  23.                 yy += xArr[1] - xArr[0];//得到电脑鼠标挪动的间距   
  24.                 xx += yArr[1] - yArr[0];   
  25.                 xNum.value = xx+"°";//将所得到间距数据取值给input显示信息转动角度   
  26.                 yNum.value = yy+"°";   
  27.                 //将转动角度写入transform中   
  28.                 box.style.transform = "rotatex("+xx+"deg) rotatey("+yy+"deg) rotatez(0deg)scale3d(0.7,0.7,0.7)";   
  29.                 xArr[0] = e.clientX/2;   
  30.                 yArr[0] = e.clientY/2;   
  31.             }   
  32.   
  33.         };   
  34.         window.onmouseup = function () {//电脑鼠标抬起恶性事件————用于消除电脑鼠标挪动恶性事件,   
  35.             body.style.cursor = 'url("img/openhand1.png"),auto';   
  36.             window.onmousemove = null;   
  37.         }   
  38.     }   
  39.     //点一下恶性事件、负责立方体盒子的6面屈伸   
  40.     function clickBox(){   
  41.         var btn = document.querySelector(".open");   
  42.         var box = document.querySelector(".box");   
  43.         var son = box.children;   
  44.         var value = 0;   
  45.         //储存立方体散开时的transform主要参数   
  46.         var arr0 = ["rotatey(⑼0deg) translatex(⑴00px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(⑴00px)",<br>"rotatex(⑼0deg) translatey(100px)","translatez(⑴00px)","translatez(100px)"];   
  47.         //储存立方体合拼时的transform主要参数   
  48.         var arr1 = ["rotatey(⑼0deg) translatex(⑴00px)translatez(100px)","rotatey(90deg) translatex(100px)translatez(100px)",<br>"rotatex(90deg) translatey(⑴00px)translatez(100px)","rotatex(⑼0deg) translatey(100px)translatez(100px)","translatez(⑵00px)","translatez(200px)"];   
  49.         btn.onclick = function(){   
  50.             if(value == 0){   
  51.                 value = 1;   
  52.                 btn.value = "点一下合拼";   
  53.                 for(var i=0;i<arr1.length;i++){   
  54.                     son[i].style.transform = arr1[i];   
  55.                     console.log(son[i])   
  56.                 }   
  57.             }else if(value == 1){   
  58.                 value = 0;   
  59.                 btn.value = "点一下散开";   
  60.                 for(var j=0;j<arr0.length;j++){   
  61.                     son[j].style.transform = arr0[j];   
  62.                     console.log(j);   
  63.   
  64.                 }   
  65.             }   
  66.         };   
  67.     }   
  68. </script>    
  69.   

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。