ผ่าน JS พื้นเมือง, คลิกเหตุการณ์, การกดเมาส์, การยกของเมาส์และเหตุการณ์การเคลื่อนไหวของเมาส์, การลากและการหมุนของลูกบาศก์ 3D นั้นเกิดขึ้นได้และมุมการหมุนจะสะท้อนในเวลาจริงเพื่อแสดงบนอินเทอร์เฟซ
หลักการใช้งาน: โดยการได้รับพิกัดของเมาส์เมื่อคลิกที่หน้าจอและพิกัดของเมาส์เมื่อเคลื่อนที่เราสามารถรับระยะห่างของเมาส์ที่เคลื่อนที่บนแกน x และแกน y และกำหนดระยะทางให้กับแอตทริบิวต์การแปลงในเวลาจริง
ดังนั้นผลกระทบของการหมุนลูกบาศก์ 3D ทำได้โดยการเปลี่ยนการแปลง: หมุนค่าแอตทริบิวต์
บล็อกรหัส HTML:
<body> <อินพุต type = "button" value = "คลิกเพื่อแพร่กระจาย"/> <อินพุต type = "text" value = "" /// มุมการหมุน x-axis <input type = "text" value = "" /// y-axis มุมการหมุน <อินพุต type = "text"/> <div> <div> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </div> </body>
บล็อกรหัส CSS:
<style> ร่างกาย {เคอร์เซอร์: url ("img/openhand1.png"), auto;}. big_box {width: 500px; ความสูง: 500px; ระยะขอบ: 200px auto;}. กล่อง {-webkit-transform-style Preserve-3d; Transform-style: PRESSERVE-3D; Transform-Origin: 100PX 100PX 00PX; ตำแหน่ง: สัมพัทธ์; แปลง: ROTATEX (0DEG) ROTATEY (0DEG) ROTATEZ (0DEG) Scale3d (0.7,0.7,0.7);}. 200px; ความสูง: 200px; การปรับขนาดกล่อง: Border-Box; Border: 1px Solid #999;/*Opacity: 0.7;*/text-allign: center; line-height: 200px; font-size: 60px; Font-weight: 700; Border-Radius: 12%;}. ROTATEY (-90DEG) Translatex (-100px); // ซ้าย}. Box Span: Nth-Child (2) {พื้นหลังสี: สีแดง; Transform-Origin: ขวา; Transform: Rotatey (90deg) Translatex (100px); // Right}. Rotatex (90deg) Translatey (-100px); // top}. span: nth-child (4) {พื้นหลังสี: #6633ff; transform-origin: ด้านล่าง; แปลง: rotatex (-90deg) translatey (100px); Translatez (-100px); // back} .box span: nth-child (6) {พื้นหลัง-สี: #122b40; แปลง: translatez (100px); // front} .box: Hover Span {Opacity: 0.3;}. กล่อง: โฮเวอร์บล็อกรหัส JS:
<script> ย้าย (); clickbox (); // ฟรีเมื่อเมาส์ถูกกดและเคลื่อนย้ายฟังก์ชั่นย้าย () {var body = document.querySelector ("body"); var box = document.querySelector (". box"); var xnum = document.querySelector ("var xnum" = 0, yy = 0; var xarr = [], yarr = []; window.onmousedown = function (e) {// เมาส์กดเหตุการณ์ร่างกาย style.cursor = 'url ("img/closedhand1.png"), auto'; xarr [0] = e.clientx/2; // e.clienty/2; window.onmousemove = function (e) {// การเคลื่อนที่ของเมาส์ เหตุการณ์ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ จำนวนที่จะอินพุตเพื่อแสดงมุมการหมุน ynum.value = yy+"°"; // เขียนมุมการหมุนลงในกล่องแปลงรูปแบบ transform = "rotatex ("+xx+"deg) rotatey ("+yy+"deg) rotatez (0deg) scale3d e.clienty/2;}}; window.onmouseup = function () {// เหตุการณ์ mouselift --- ใช้เพื่อล้างเหตุการณ์การเคลื่อนไหวของเมาส์, body.style.cursor = 'url ("img/openhand1.png"), {clickboutbox = document.QuerySelector (". Open"); var box = document.querySelector (". box"); var son = box.children; var value = 0; // การจัดเก็บพารามิเตอร์การแปลงการแปลงเมื่อลูกบาศก์กระจาย var arr0 = ["rotatey (-90deg) translatex (-100px) Translatey (-100px) ", <br>" Rotatex (-90deg) Translateey (100px) "," Translatez (-100px) "," Translatez (100px) "]; // การจัดเก็บพารามิเตอร์การแปลง (100P) Translatex (100px) Translatez (100px) ", <br>" Rotatex (90deg) Translatey (-100px) Translatez (100px) "," Rotatex (-90deg) Translatey (100px) Translatez (100px) "," Translatez (-200px) " function () {ถ้า (value == 0) {value = 1; btn.value = "คลิกเพื่อรวม"; สำหรับ (var i = 0; i <arr1.length; i ++) {son [i] .style.transform = arr1 [i]; console.log (son [i])}}}} แพร่กระจาย "; สำหรับ (var j = 0; j <arr0.length; j ++) {son [j] .style.transform = arr0 [j]; console.log (j);}}};} </script>ข้างต้นเป็นความรู้ที่เกี่ยวข้องที่แนะนำให้คุณทราบเกี่ยวกับการหมุนลูกบาศก์ 3 มิติของเมาส์ตามการแปลงแอตทริบิวต์ใหม่และ JS ดั้งเดิมของ CSS3 ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!