Melalui JS asli, acara klik, tekan mouse, angkat mouse dan peristiwa gerakan mouse, hambatan dan rotasi kubus 3D direalisasikan, dan sudut rotasi tercermin secara real time untuk ditampilkan pada antarmuka.
Prinsip Implementasi: Dengan mendapatkan koordinat mouse saat mengklik layar dan koordinat mouse saat bergerak, kita dapat memperoleh jarak mouse yang bergerak pada sumbu x dan sumbu y, dan menetapkan jarak ke atribut transformasi secara real time.
Oleh karena itu, efek rotasi kubus 3D dicapai dengan mengubah transformasi: putar nilai atribut.
Blok Kode HTML:
<body> <input type = "tombol" value = "klik untuk menyebar"/> <input type = "text" value = "" /// x-sumbu sudut rotasi <input type = "text" value = "" /// y-sumbu sudut rotasi <input type = "text"/> <div> <div> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </div> </body>
Blok Kode CSS:
<tyle> body {kursor: url ("img/openhand1.png"), auto;}. Big_box {width: 500px; tinggi: 500px; margin: 200px auto;}. Kotak {-webkit-transform-style: preserve-3d; -Moz-transform: preserv; Preserve-3D; Transform-style: Preserve-3d; Transform-Origin: 100px 100px 00px; Posisi: Relatif; Transform: Rotatex (0Deg) Rotate (0Deg) RotateZ (0Deg) Skala (0.7.0.7.0.7);}. Box Span {semua linar: semua linar: semua linar 1 lineer: semua linar: semua linar 1 linear; 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); // kiri} .box span: nth-child (2) {latar belakang-color: merah; transform-origin: kanan; transform: rotatey (90deg) translatex (100px); // kanan. translatey (-100px); // top} .box span: nth-child (4) {background-color: #6633ff; transform-origin: Bottom; transform: rotatex (-90deg) translatey (100px); // Bottom} .box span: nth-child (5) {latar belakang-color: gold; Span: nth-child (6) {latar belakang-warna: #122b40; transform: translatez (100px); // depan} .box: hover span {opacity: 0.3;}. Kotak: hover {animation-play-state: jeda; // atur animasi jeda} </style </style>Blok Kode JS:
<script> pindahkan (); clickbox (); // gratis saat mouse ditekan dan dipindahkan, function move () {var body = document.queryselector ("body"); var box = document.queryselector (". box"); var xnum = document.queryselector (". = 0, yy = 0; var xarr = [], yarr = []; window.onmousedown = fungsi (e) {// mouse tekan event body.style.cursor = 'url ("img/closedhand1.png"), auto'; xarr [0] = e.clientx/2; // dapatkan koordinat koordinat dari mouse [0] = e.clientx/2;//dapatkan koordinat dari mouse mouse [0] = E.ClientX/2;/mendapatkan koordinat dari mouse mouse = E. E. E.ClientX/2;/mendapatkan koordinat dari mouse mouse [0]; E.Clienty/2; window.onmouseMove = function (e) {// Mouse Moving Acara --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Angka untuk input untuk menampilkan sudut rotasi ynum.value = yy+"°"; // Tulis sudut rotasi ke dalam kotak transform.style.transform = "rotatex ("+xx+"deg) rotate ("+yy+"deg) rotatez (0deg) skala3d (0.7.0.7.7.7); E.Clienty/2;}}; window.onMouseUp = function () {// acara Mouselift --- digunakan untuk menghapus peristiwa gerakan mouse, body.style.cursor = 'url ("img/openhand1.png"), auto'; window.onmouseMove = null;}} {clicks auto '; click.onmouseMove = null;}} {clicks auto'; = Document.QuerySelector (". Open"); var box = document.queryselector (". box"); var son = box.children; var value = 0; // menyimpan parameter transformasi ketika kubus disebarkan var arr0 = ["rotate (-90deg) translatex (-100px)", "rotate (90deg) (-100px)", "rotate (-90deg) (-100px)", "Rotate (-90deg) (-100px)" " translatey (-100px) ", <br>" rotatex (-90deg) translatey (100px) "," translatez (-100px) "," translatez (100px) "]; // Storing Parameter Var Arr1 = [" Rotate (-90Deg) (-100px) (-100px) (-90deg) (-100px) (-ateG) (-90Deg) (-100px) (-ateG) (-90DEG) (-100px) (-100px) (-ateG) (-100px) (-100px) (-atez) (-100px) (-ate) translatex (100px) translateZ (100px) ", <br>" rotatex (90deg) translatey (-100px) translatez (100px) "," rotatex (-90deg) translateY (100px) translatez (100px) "," TranslateZ (-200px) ",", "," 1, "Translatez (-200px) (-200px) (-200px)", "", "", "," ",", "", "," "," "," function(){if(value == 0){value = 1;btn.value = "click to merge";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 = "click to sebarkan "; untuk (var j = 0; j <arr0.length; j ++) {son [j] .style.transform = arr0 [j]; console.log (j);}}};} </skrip>Di atas adalah pengetahuan yang relevan yang diperkenalkan kepada Anda tentang rotasi kubus 3D yang menyeret mouse berdasarkan transformasi atribut baru dan JS asli CSS3. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!