A través de JS nativos, Haga clic en eventos, prensa del mouse, elevación del mouse y eventos de movimiento del mouse, se realiza la arrastre y la rotación del cubo 3D, y el ángulo de rotación se refleja en tiempo real para mostrar en la interfaz.
Principio de implementación: al obtener las coordenadas del mouse al hacer clic en la pantalla y las coordenadas del mouse al movernos, podemos obtener la distancia del mouse que se mueve en el eje x y el eje y, y asignar la distancia al atributo de transformación en tiempo real.
Por lo tanto, el efecto de la rotación del cubo 3D se logra cambiando la transformación: rotar el valor del atributo.
Bloque de código HTML:
<body> <input type = "button" value = "haga clic para difundir"/> <input type = "text" value = "" /// x-eje de rotación ángulo de rotación <input type = "text" valor = "" /// ángulo de rotación del eje y <input type = "text"/> <div> <iv> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </div> </body>
Bloque de código CSS:
<Syle> Body {cursor: url ("img/openHand1.png"), auto;}. big_box {width: 500px; altura: 500px; margen: 200px auto;}. box {-webkit-transformform-style: Preserve-3D; -MOz-TRANSFORM-STYLE: Preserve-3D; -MS-TRANSFORM-SSTYLE: STYLE: STYLE: STYLE: TRANSFORTO: STYLE: TRANSFORTO: TRANSFORTO; 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 {Transición: todos los 1s Lineal;} SPAN {Display: Block; Position: Absolute; Width: 200px; 200px; 200px; 200px; Box-Sizing; border-box; borde: 1px sólido #999;/*opacidad: 0.7;*/text-align: centro; line-aguja: 200px; font-size: 60px; font-weight: 700; border-radius: 12%;}. box span: nth-child (1) {color de fondo: profundo; transformar; transformación: órgan: izquierda; transformación: Rotate-span (90DEG) traduceX (-100px); // izquierda} .Box Span: nth-child (2) {background-color: rojo; transform-órigin: right; transform: rotatey (90deg) traducex (100px); // right} .Box span: nth-child (3) {fondo de fondo: verde; transform-origin: top; transform: rotatex (90deg) (--100px) (--100px) ; // top} .Box Span: NTH-Child (4) {Background-Color: #6633ff; Transform-Origin: Bottom; Transform: RotateX (-90DEG) Translatey (100px); // Bottom} .Box Span: Nth-Child (5) {Background-color: Gold; transform: TranslateZ (-100px); // Back Span #122B40; transform: traducez (100px); // front} .Box: Hover Span {Opacidad: 0.3;}. Box: Hover {Animation-Play-State: pause; // Establecer pausa de animación} </style>Bloque de código JS:
<script>move();clickBox();//Free when the mouse is pressed and moved, 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) {// mouse presione event body.Style.cursor = 'url ("img/blindhand1.png"), auto'; xarr [0] = e.clientx/2; // consigue los coordinados de los mOuse cuando hace clic en la pantalla de la pantalla de la pantalla. e.clienty/2; window.onmouseMove = function (e) {// mouse en movimiento event----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- = xx+"°";// Assign the obtained distance Número de entrada para mostrar para mostrar el ángulo de rotación ynum.value = yy+"°"; // Escribe el ángulo de rotación en transformar box.style.transform = "Rotatex ("+xx+"deg) Rotatey ("+yy+"deg) RotateZ (0deg) escala 3D (0.7,0.7,0.7)"; xarr [0] = E.Cluclex/2; YARR [0] e.clienty/2;}}; window.onmouseUp = function () {// MouseLift Event --- Se usa para borrar el evento de movimiento del mouse, body.style.cursor = 'url ("img/openHand1.png"), Auto'; window.onmousemove = null;}} // Evento responsable por el estiramiento de seis sesed de la caja de cajas de Cube de cebo (). document.querySelector (". Open"); var box = document.queryselector (". box"); var son = box.children; var value = 0; // almacenamiento de parámetros de transformación cuando el cubo está disperso var arr0 = ["rotatey (-90deg) traducex (-100px)", "rotatey (90deg) traduceX (100px) "," Rotatex (90deg) traducey (-100px) ", <br>" Rotatex (-90deg) traducey (100px) "," traduceZ (-100px) "," traducez (100px) "]; // Los parámetros de transformación de la transformación var arr1 = [" rotatey (-90deg) traduceX (-100px) traducez (100px) "," Rotatey (90deg) traduceX (100px) traducez (100px) ", <br>" Rotatex (90deg) traducey (-100px) traducez (100px) "," Rotatex (-90deg) traducey (100px) traducez (100px) "," traducez (-200px) "," traducez (200px) "]; btn.onClick = function () {if (value == 0) {valor = 1; btn.value =" haga clic en fusión "; arr1 [i]; console.log (son [i])}} else if (valor == 1) {value = 0; btn.value = "haga clic para difundir"; for (var j = 0; j <arr0.length; j ++) {son [j] .Style.transform = arr0 [j]; console.log (j);}}};};};};};};Lo anterior es el conocimiento relevante que le presentó sobre el mouse que arrastra la rotación de cubos 3D basada en la nueva transformación de atributos y JS nativo de CSS3. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!