Grâce à JS natif, cliquez sur les événements, la presse de souris, les événements de relevé de souris et de souris, la traînée et la rotation du cube 3D sont réalisées et l'angle de rotation se reflète en temps réel à afficher sur l'interface.
Principe d'implémentation: En obtenant les coordonnées de la souris lors du clic sur l'écran et les coordonnées de la souris lors du déplacement, nous pouvons obtenir la distance de la souris se déplaçant sur l'axe X et l'axe Y, et attribuer la distance à l'attribut de transformation en temps réel.
Par conséquent, l'effet de la rotation du cube 3D est obtenu en modifiant la valeur d'attribut de transformation: rotation.
Bloc de code HTML:
<body> <Type d'entrée = "Button" Value = "Cliquez pour étaler" /> <Type de saisie = "Text" Value = "" /// Angle de rotation x-axis <Type d'entrée = "Text" Value = "" /// Angle de rotation Y-axis <Input Type = "Text" /> <div> <div> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </div> </ body>
Bloc de code CSS:
<style> Body {Cursor: url ("img / openhand1.png"), auto;}. big_box {width: 500px; hauteur: 500px; margin: 200px auto;}. Box {-webkit-transformant-style: préserver-3d; -moz-transform-syle: preserve-3d; -ms-transform: Preserve-3d; style transform: 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: tous les 1 200px; hauteur: 200px; sizaine de boîte: bordure-boîte; bordure: 1px solide # 999; / * opacité: 0,7; * / text-align: Centre; Line-Height: 200px; Font-Size: 60px; Font-Weight: 700; Border-Radius: 12%;}. Rotatey (-90DEG) tradlatex (-100px); // gauche} .box span: nth-child (2) {background-colore: rouge; transform-origin: droit; transform: rotatey (90deg) tradlax (100px); // droit} .box span: nth-child (3) {background-colore: green; transform-origin: top; Translatey (-100px); // top} .box span: nth-child (4) {background-Color: # 6633ff; transform-original: bottom; transform: rotatex (-90deg) translatey (100px); // bottate} .box span: nth-child (5) {background-colore: Gold; transform: translatez (-100px); Span: nth-child (6) {background-Color: # 122B40; transform: tradatez (100px); // front} .box: hover span {opacity: 0.3;}. Box: hover {animation-play-state: paused; // set Animation Pause} </ style>Bloc de code JS:
<script> move (); clickbox (); // libre Lorsque la souris est enfoncée et déplacée, fonction move () {var body = document.queryselector ("body"); var box = document.QuerySelect 0; var xx = 0, yy = 0; var xarr = [], yarr = []; window.onmousedown = function (e) {// souris appuyez sur l'événement body.style.cursor = 'url ("img / fermerhand1.png"), auto'; xarr [0] = e.clientx / 2; // Obtenez les coordonnées de la souris lorsque vous cliquez sur la souris lors de l'écran Yar e.clienty / 2; window.onmouseMove = fonction (e) {// souris en mouvement Événement --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Numéro à entrée pour afficher l'angle de rotation ynum.value = yy + "°"; // Écrivez l'angle de rotation dans la boîte de transformation. E.Clienty / 2;}}; window.onMouseUp = function () {// Mouselift Event --- Utilisé pour effacer l'événement de mouvement de la souris, body.style.cursor = 'url ("img / openhand1.png"), auto'; window.onmoussemove = null;}} // click événeme = document.QuerySelector (". Open"); var box = document.QuerySelector (". Box"); var Son = box.children; var value = 0; // stocant les paramètres de transformation lorsque le cube est dispersé var arr0 = ["Rotatey (-90deg) tradlatex (-100px)", "Rotatey (90Deg) translatex (100px) "," rotatex (90deg) translatey (-100px) ", <br>" rotatex (-90deg) translatey (100px) "," Translatez (-100px) " 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 =" cliquez pour fusionner "; pour (var i = 0; i <arr1.Legth; i ++) {Son [i]. Arr1 [i]; console.log (Son [i])}} else if (value == 1) {value = 0; btn.value = "cliquez pour se propager"; pour (var j = 0; j <arr0.length; j ++) {Son [j] .Style.transform = arr0 [j]; console.log (j);}}};};Ce qui précède est la connaissance pertinente qui vous est présentée sur la souris qui traîne la rotation du cube 3D basé sur la nouvelle transformation d'attribut et JS natif de CSS3. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!