Through the original JS, click events, mouse down, mouse lift and mouse movement events, to achieve 3d cube drag rotation, and the rotation angle of real-time reaction to the interface display.
realization Principle: by obtaining the mouse clicks the screen coordinates and the mouse movement coordinates, obtains the mouse in the x axis, the y axis movement distance, assigns the distance real time to the transform attribute
Thus the effect of 3d cube rotation is achieved by changing the value of Transform:rotate property.
HTML code block:
<body> <input type= "button" class= "Open" value= "click to Disperse"/> <input " text" type= "class=" value = ""/>//x axis rotation angle <input type= "text" class= "Ynum" value= ""/>//y axis rotation angle <input type= "text" class= "Znum "/> <div class=" Big_box "> <div class=" box "> <span></span> <span ></span> <span></span> <span></span> <span></span> <span></span> </div> </div>
CSS code block:
<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-sizin
G: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-color:red; transform-origin:right; Transform:rotatey (90deg) Translatex (100px);//Right}. Box Span:nth-child (3) {background-color:green; transform-origin:top; transfOrm:rotatex (90deg) Translatey ( -100px); box Span:nth-child (4) {background-color: #6633FF; Transform-origin:
Bottom Transform:rotatex ( -90deg) Translatey (100px)//down}. Box Span:nth-child (5) {background-color:gold; Transform: Translatez ( -100px); 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 (); The mouse is pressed and moved, function move () {var = document.queryselector (' body '); var box = Document.queryselector (". box"); var XN
Um =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 clicks on the screen when the coordinates yarr[0] = E.CLIENTY/2;
Window.onmousemove = function (e) {//mouse move event ———— trigger xarr[1 when mouse is pressed and moved] = 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 to move the distance xx + + yarr[1]-yarr[0];
Xnum.value = xx+ "°";//The obtained distance number is assigned to the input display rotation angle Ynum.value = yy+ "°"; Writes the rotation angle to 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 mouse movement event, body.style.cursor = ' url ("Img/openhand1.png"), auto '; Window.onmoUsemove = null; }//Click event, six-side extension function for cube box Clickbox () {var btn = Document.queryselector (". open"); 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 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.t
Ransform = Arr1[i]; Console.log (Son[i])}}else if (value = = 1) {value = 0; btn.value = "click Scatter"; for (var j=0;j<arr0.length;j++) {Son[j].style . Transform = Arr0[j];
Console.log (j);
}
}
}; } </script>
The above is a small set to introduce new attributes based on CSS3 transform and native JS to drag the mouse 3d cube rotation knowledge, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!
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
