Através de JS nativo, clique em eventos, prensa de mouse, elevação do mouse e eventos de movimento do mouse, o arrasto e a rotação do cubo 3D são realizados e o ângulo de rotação é refletido em tempo real para exibir na interface.
Princípio da implementação: Ao obter as coordenadas do mouse ao clicar na tela e nas coordenadas do mouse ao se mover, podemos obter a distância do mouse que se move no eixo x e atribui a distância ao atributo de transformação em tempo real.
Portanto, o efeito da rotação do cubo 3D é alcançado alterando o valor do atributo Transform: Gire.
Bloco de código HTML:
<Body> <input type = "button" value = "clique para espalhar"/> <input type = "text" value = "" /// ângulo de rotação do Axis X-Axis <input type = "text" value = "" /// Y-AXIS ângulo de rotação <entrada type = "text"/> <div> <div> <mpan> </span> <pan> </span> <pan> </span> </span> </span> <pan> </span> <pan> </span> </div> </body>
Bloco de código CSS:
<estilo> corpo {cursor: url ("img/openHand1.png"), auto;}. big_box {width: 500px; altura: 500px; margem: 200px auto;}. preserve-3d; estilo de transformação: preserve-3d; origem-origina: 100px 100px 00px; posição: relativa; transformada: giratex (0deg) giratey (0deg) girlatez (0deg) scale3d (0,7,0.7,0.7);}. 200px; tamanho da caixa: caixa de borda; borda: 1px sólido #999;/*opacidade: 0,7;*/alinhamento de texto: centro; altura da linha: 200px; font-size: 60px; font-weight: 700; border-radius: 12%;}. Tradratex (-100px); // Esquerda} .Box Span: Nth-Child (2) {Background-Color: Red; Transform-Origin: Right; Transform: Rotatey (90Deg) TradrateX (100px); // direita}. Span: nd-childing (3) {Background-Color: Green; Transform-Origin: // top} .Box span: nth-child (4) {cor de fundo: #6633ff; transform-origin: Bottom; transform: giratex (-90deg) translatey (100px); // inferior} .Box Span: nth-child (5) {Background-Color: Gold; TransformEz (-100px); #122B40; Transform: Translatez (100px); // FRONT} .Box: Surpan Span {Opacity: 0.3;}. Caixa: Hover {Animation-Play-State: Pause; // Define Animation Pause} </Syle>Bloco de código JS:
<SCRIPT> move (); clickbox (); // livre quando o mouse é pressionado e movido, função move () {var body = document.QuerySelector ("corpo"); var box = document.QuerySelector (". box"); var xnum = document.QuerySelector (". Xnum); var ynum = Document.QuerySelector". xx = 0, yy = 0; var xarr = [], yarr = []; window.onMousedown = function (e) {// mouse pressione o evento Body.style.cursor = 'url ("iMg/fechado de 1; e.clienty/2; window.onmouseMove = function (e) {// movimentação do mouse evento Número para entrada para exibir o ângulo de rotação ynum.value = yy+"°"; // Escreva o ângulo de rotação na caixa de transformação.style.Transform = "girtatex ("+xx+"deg) giratey ("+yy+"deg) scalez (0DEG) (0,7,7,7,7,7); e.clienty/2;}}; window.onMouseUp = function () {// Evento de mouselift --- usado para limpar o evento de movimento do mouse, corpora.style.cursor = 'url ("img/openHand1.png"), Auto'; Window.OnMouSove = Null;}} // clique = Document.QuerySelector (". Open"); var box = document.QuerySelector (". Box"); var SON = box.Children; var valor = 0; // Armazenando parâmetros de transformação quando o cubo é disperso var ARR0 = ["Rotatey (-90deg) (-100px)", "" Rotatey (90Deg) (-100px) "," "Rotatey (90DEG) (-100px)", "" Rotatey (90Deg). Tradratey (-100px) ", <br>" Rotatex (-90DEG) Tradratey (100px) "," Translatez (-100px) "," translatez (100px) "]]; // parâmetros de transformação de armazenamento Var Arr1 = [" Rotatey (-90DEG)); Tradratex (100px) Tradratez (100px) ", <br>" giratex (90DEG) Tradlatey (-100px) Tradratez (100px) "," giratex (-90deg) translnatnnn (100px) translatez (100px) "," Tradlatez (-200px) "," function () {if (value == 0) {value = 1; btn.value = "clique para mesclar"; para (var i = 0; i <arr1.length; i ++) {filho [i] .style.Transform = Arr1 [i]; console.log (son] [i])}}} se (} 1) {); j = 0; j <arr0.length; j ++) {filho [j] .style.transform = arr0 [j]; console.log (j);}}};} </script>O exposto acima é o conhecimento relevante apresentado a você sobre a rotação de cubo 3D do mouse com base na transformação do novo atributo e no JS nativo do CSS3. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!