Durch native JS, Klicken Sie auf Ereignisse, Mausdrucke, Maushub- und Mausbewegungsereignisse, der Luftwiderstand und die Drehung des 3D -Würfels werden realisiert, und der Drehwinkel wird in Echtzeit reflektiert, um auf der Schnittstelle anzuzeigen.
Implementierungsprinzip: Durch das Erhalten der Koordinaten der Maus beim Klicken auf den Bildschirm und die Koordinaten der Maus können wir bei der Bewegung den Abstand der Maus erhalten, die sich in der X-Achse und der Y-Achse bewegen, und den Abstand dem Transformationsattribut in Echtzeit zuweisen.
Daher wird der Effekt der 3D -Würfelrotation durch Ändern der Transformation erreicht: Attributwert drehen.
HTML -Codeblock:
<body> <Eingabe type = "button" value = "klicken, um zu verbreiten"/> <Eingabe type = "text" value = "" /// x-axis-Rotationswinkel <Eingabe type = "text" value = "" /// y-axis-Drehwinkel <Eingabe <Eingabe <Eingabe <Eingabe Typ = "text"/> <div> <div> <span> </span> <span> </span> <span> </span> </span> <span> </span> </span> </div> </body>
CSS -Codeblock:
<Styles> Body {Cursor: url ("img/openHand1.png"), auto;}. Big_box {width: 500px; Höhe: 500px; Margin: 200px Auto; Preserve-3d; Transform-Style: Preserve-3d; Transform-Origin: 100px 100px 00px; Position: relativ; Transformation: rotatex (0deg) rotatey (0deg) rotatez (0deg) scale3d (0,7,0,7,0,7); 200px; Höhe: 200px; Boxgröße: Border-Box; Rand: 1px Solid #999;/*Opazität: 0,7;*/Text-Align: Mitte; Linienhöhe: 200px; Schriftgröße: 60px; Schriftgewicht: 700; Border-Radius: 12%; rotatey (-90deg) translatex (-100px); // links} .box span: nth-child (2) {Hintergrundfarbe: rot; Transform-Origin: rechts; Transformation: rotatey (90deg) translatex (100px); // rechts} .box span: nth-kind (3) {90-farb: grün: grün: grün: grün. translatey (-100px); // top} .box span: nth-child (4) {background-color: #6633ff; transform-origin: boden; transformation: rotatex (-90deg) translatey (100px); // boden} .box span: nth-child (5) {Hintergrund-Color: Gold; Span: N-Child (6) {Hintergrund-Color: #122b40; Transformation: TranslateZ (100px); // vorne} .box: Hover span {Opazität: 0.3;}. Box: Hover {Animations-Play-State: Pause; // Set Animation Pause} </style> </style>JS -Code -Block:
<Script> move (); cLICKBOX (); // frei, wenn die Maus gedrückt und bewegt wird, function move () {var body = document.querySelector ("body"); var box = document.querySelector (". Box"); var xnum = document.Queryssel (". xnum"); var ynum = document.QuerySEctor (". 0; var xx = 0, yy = 0; var xarr = [], yarr = []; Fenster. E.Clienty/2; Fenster.onmousemove = Funktion (e) {// Mausbewegung Ereignis ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Anzahl der Eingänge, um den Drehwinkel anzuzeigen. e.clienty/2;}}; window.onmouseUp = function () {// MousElift-Ereignis --- verwendet, um das Mausbewegungsereignis zu löschen, body.style.cursor = 'url ("img/openHand1.png"), automatisch'; = document.querySelector(".open");var box = document.querySelector(".box");var son = box.children;var value = 0;//Storing transform parameters when the cube is dispersed var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",<br>"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];//Storing transform parameters var arr1 = ["rotatey(-90deg) translatex (-100px) translatez (100px) "," rotatey (90 °) translatex (100px) translatez (100px) ", <br>" rotatex (90deg) translatey (-100px) translatez (100px) "," Rotatex (-90DEG)) "," Rotatex (-90DEG)) "rotatex (-90DEG)) translatey (100px) translatez (100px) "," translatez (-200px) "," translatez (200px) "]; Btn.onclick = function () {if (value == 0) {value = 1; arr1 [i]; console.log (Son [i])}} else if (value == 1) {value = 0;Das obige ist das relevante Wissen, das Ihnen über die 3D -Cube -Rotation der Maus geführt wird, basierend auf der neuen Attributtransformation und nativen JS von CSS3. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!