Implementation principle: By getting the mouse to click on the screen and the coordinates of the mouse movement, to get the mouse in the x-axis, the y-axis movement distance, the distance real-time assignment to the Transform property
Thus, the effect of 3d cube rotation can be achieved by changing the Transform:rotate attribute value.
HTML code block:
<body><input type= "button" class= "Open" value= "click Spread"/><input type= "text" class= "Xnum" 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></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-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);//On}.box Span:nth-child (4) {background-color: #6633FF; Transform-origin:bottom;transform:rotatex ( -90deg) Translatey (100px) ;//Lower}.box Span:nth-child (5) {Background-color:gold;transform:translatez ( -100px);//Post}.box Span:nth-child (6) { Background-color: #122b40; Transform:translatez (100px);//former}.box:hover span{opacity:0.3;}. box:hover{animation-play-state:paused;//Set Animation pause}</style>
JS code block:
<script>move (); Clickbox ();//trigger when 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 down event body.style.cur sor = ' url ("Img/closedhand1.png"), auto '; xarr[0] = e.clientx/2;//Get mouse click on screen 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 distance of mouse movement 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 events, responsible for the cube boxSix-side stretch function 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) "];//Storage cube when merging transform parameters 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>
The above is a small series to introduce the new attribute based on the CSS3 transform and the native JS implementation of the mouse drag 3d cube rotation of the relevant knowledge, I hope that we have some help, if you have any questions please give me a message, small series will promptly reply to you. Thank you very much for your support for topic.alibabacloud.com!
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
