實現原理：通過擷取滑鼠點擊螢幕時的座標和滑鼠移動時的座標，來獲得滑鼠在X軸、Y軸移動的距離，將距離即時賦值給transform屬性
從而通過改變transform：rotate屬性值來達到3d立方體旋轉的效果
HTML代碼塊：
<body><input type="button" class="open" value="點擊散開"/><input type="text" class="xNum" value=""/>//X軸旋轉角度<input type="text" class="yNum" value=""/>//Y軸旋轉角度<input type="text" class="zNum"/><div class="big_box"><div class="box"><span></span><span></span><span></span><span></span><span></span><span></span></div></div></body>
CSS代碼塊：
<style>body{cursor: url("img/openhand1.png"),auto;}.big_box{width: 500px;height: 500px;margin: 200px auto;}.box{-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;transform-origin:100px 100px 00px;position: relative;transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);}.box span{transition: all 1s linear;}span{display: block;position: absolute;width: 200px;height: 200px;box-sizing: border-box;border:1px solid #999;/*opacity: 0.7;*/text-align: center;line-height: 200px;font-size: 60px;font-weight: 700;border-radius: 12%;}.box span:nth-child(1){background-color: deepskyblue;transform-origin: left;transform: rotatey(-90deg) translatex(-100px);//左}.box span:nth-child(2){background-color: red;transform-origin: right;transform: rotatey(90deg) translatex(100px) ;//右}.box span:nth-child(3){background-color: green;transform-origin: top;transform: rotatex(90deg) translatey(-100px) ;//上}.box span:nth-child(4){background-color: #6633FF;transform-origin: bottom;transform: rotatex(-90deg) translatey(100px);//下}.box span:nth-child(5){background-color: gold;transform: translatez(-100px);//後}.box span:nth-child(6){background-color: #122b40;transform: translatez(100px);//前}.box:hover span{opacity: 0.3;}.box:hover{animation-play-state:paused;//設定動畫暫停}</style>
JS代碼塊：
<script>move();clickBox();//滑鼠按下且移動時觸發，function move(){var body = document.querySelector("body");var box = document.querySelector(".box");var xNum =document.querySelector(".xNum");var yNum =document.querySelector(".yNum");var x = 0,y = 0,z = 0;var xx = 0,yy = 0;var xArr = [],yArr = [];window.onmousedown = function (e) {//滑鼠按下事件body.style.cursor = 'url("img/closedhand1.png"),auto';xArr[0] = e.clientX/2;//擷取滑鼠點擊螢幕時的座標yArr[0] = e.clientY/2;window.onmousemove = function (e) {//滑鼠移動事件————當滑鼠按下且移動時觸發xArr[1] = e.clientX/2;//擷取滑鼠移動時第一個點的座標yArr[1] = e.clientY/2;yy += xArr[1] - xArr[0];//獲得滑鼠移動的距離xx += yArr[1] - yArr[0];xNum.value = xx+"°";//將所獲得距離數字賦值給input顯示旋轉角度yNum.value = yy+"°";//將旋轉角度寫入transform中box.style.transform = "rotatex("+xx+"deg) rotatey("+yy+"deg) rotatez(0deg)scale3d(0.7,0.7,0.7)";xArr[0] = e.clientX/2;yArr[0] = e.clientY/2;}};window.onmouseup = function () {//滑鼠抬起事件————用於清除滑鼠移動事件，body.style.cursor = 'url("img/openhand1.png"),auto';window.onmousemove = null;}}//點擊事件、負責立方體盒子的六面伸展function clickBox(){var btn = document.querySelector(".open");var box = document.querySelector(".box");var son = box.children;var value = 0;//儲存立方體散開時的transform參數var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",<br>"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];//儲存立方體合并時的transform參數var arr1 = ["rotatey(-90deg) translatex(-100px)translatez(100px)","rotatey(90deg) translatex(100px)translatez(100px)",<br>"rotatex(90deg) translatey(-100px)translatez(100px)","rotatex(-90deg) translatey(100px)translatez(100px)","translatez(-200px)","translatez(200px)"];btn.onclick = function(){if(value == 0){value = 1;btn.value = "點擊合并";for(var i=0;i<arr1.length;i++){son[i].style.transform = arr1[i];console.log(son[i])}}else if(value == 1){value = 0;btn.value = "點擊散開";for(var j=0;j<arr0.length;j++){son[j].style.transform = arr0[j];console.log(j);}}};}</script>
以上所述是小編給大家介紹的基於css3新屬性transform及原生js實現滑鼠拖動3d立方體旋轉 的相關知識，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對topic.alibabacloud.com的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
