implementation principle: by getting the mouse to click on the screen coordinates and mouse movement coordinates, to get the mouse in the x-axis, the y-axis movement distance, the distance is assigned to the Transform property.
Thus, the effect of 3D cube rotation is achieved by changing the value of the Transform:rotate attribute:
HTML code block:
<body> <input type= "button" class= "Open" value= "click Spread"/> <input type= "text" class= "Xnum" value = "0"/>//x axis rotation angle <input type= "text" class= "ynum" value= "0"/>//y axis rotation angle <input type= "text" class= " Znum "/> <p class=" Big_box "> <p class=" box "> <span>1</span> <span >2</span> <span>3</span> <span>4</span> <span>5</span > <span>6</span> </p> </p></body>
CSS code blocks:
<style> Body{cursor:url ("Img/openhand1.png"), auto;} . big_box{width:500px; height:500px; margin:200px Auto; }. box{-webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style: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:all 1s linear; } span{Display:block; Position:absolute; width: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);//left}. Box Span:nth-child (2) {background-c olor:red; Transform-origin:rightright; Transform:rotatey (90deg) Translatex (100px);//Right}. Box Span:nth-child (3) {Background-co Lor:green; Transform-origin:top; Transform:rotatex (90deg) Translatey ( -100px);//upper}. Box Span:nth-child (4) {background-c Olor: #6633FF; Transform-origin:bottombottom; Transform:rotatex ( -90deg) Translatey (100px);//down}. Box Span:nth-child (5) {Background-co Lor:gold; Transform:translatez ( -100px);//after}. Box Span:nth-child (6) { Background-color: #122b40; Transform:translatez (100px);//before}. box:hover span{opacity:0.3; }. box:hover{animation-play-state:paused;//set animation pause} </style>
JS code block:
<script> move (); Clickbox (); Triggered 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 press event body.style.cursor = ' url ("Img/closedhand1.png"), auto '; Xarr[0] = e.clientx/2;//Get the mouse click on the screen when the coordinates yarr[0] = E.CLIENTY/2; Window.onmousemove = function (e) {//mouse move event ———— triggered when mouse is pressed and moved xarr[1] = e.clientx/2;//Gets the coordinates of the first point when the mouse moves YARR[1] = E.CLIENTY/2; yy + = xarr[1]-xarr[0];//Get the mouse movement distance xx + = yarr[1]-yarr[0]; Xnum.value = xx+ "°";//Assign the obtained distance number to input display rotation angle Ynum.value = yy+ "°"; Writes the rotation angle to the transform Box.style.transform = "Rotatex (" +xx+ "deg) Rotatey (" +yy+ "deg) Rotatez (0deg) Scale3d (0.7,0.7,0.7)"; Xarr[0] = E.CLIENTX/2; Yarr[0] = E.CLIENTY/2; } }; Window.onmouseup = function () {//mouse lift event ———— used to clear the mouse movement event, body.style.cursor = ' url ("Img/openhand1.png"), auto '; Window.onmousemove = null; }}//Click event, the six-side extension function Clickbox () {var btn = Document.queryselector (". Open") in charge of the cube box; var box = Document.queryselector (". box"); var son = Box.children; var value = 0; Storage Cube Transform parameter var arr0 = ["Rotatey ( -90deg) Translatex ( -100px)", "Rotatey (90deg) Translatex (100px)", "Rotatex (90deg) Translatey ( -100px) ",<br>" Rotatex ( -90deg) Translatey (100px) "," Translatez ( -100px) "," Translatez (100px )"]; Transform parameter when storing cube merge var arr1 = ["Rotatey ( -90deg) 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 = "click 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 Scatter"; for (Var j=0;j<arr0.length;j++) {son[j].style.transform = Arr0[j]; Console.log (j); } } }; } </script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
