Based on the new attributes of css3 transform and native js, you can drag the mouse to rotate a 3d cube. css3transform
Implement 3d cube rotation based on css3 new attribute transform
With native JS, click events, move the mouse, and move the mouse up, the 3d cube is dragged and rotated, and the rotation angle is displayed on the interface in real time.
Implementation principle: by obtaining the coordinates when the mouse clicks the screen and the coordinates when the mouse moves, the distance between the mouse moves on the X and Y axes is obtained, and the distance is assigned to the transform attribute in real time.
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 to expand"/> <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"/> <div class = "big_box"> <div class = "box"> <span> 1 </span> <span> 2 </span> <span> 3 </span> <span> 4 </span> <span> 5 </span> <span> 6 </span> </div> </body>
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 1 s 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); // 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); // post }. box span: nth-child (6) {background-color: #122b40; transform: translatez (100px); // front }. box: hover span {opacity: 0.3 ;}. box: hover {animation-play-state: paused; // set the 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) {// press the mouse to the event body. style. cursor = 'url ("img/closedhand1.png"), auto'; xArr [0] = e. clientX/2; // obtain the coordinate yArr [0] = e. clientY/2; window. onmousemove = function (e) {// move the mouse event ---- xArr [1] = e. clientX/2; // obtain the coordinate yArr [1] = e. clientY/2; yy + = xArr [1]-xArr [0]; // obtain the distance from the mouse movement xx + = yArr [1]-yArr [0]; xNum. value = xx + "°"; // assign the obtained distance to the input to display the Rotation Angle yNum. value = yy + "°"; // write 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 up event ---- used to clear the mouse move event, body. style. cursor = 'url ("img/openhand1.png"), auto'; window. onmousemove = null ;}// Click Event, responsible for six-sided stretching of the cube box function clickBox () {var btn = document. querySelector (". open "); var box = document. querySelector (". box "); var son = box. children; var value = 0; // The transform parameter for storing the split cube var arr0 = ["rotatey (-90deg) translatex (-100px)", "rotatey (90deg) translatex (100px) "," rotatex (90deg) translatey (-100px )",
"Rotatex (-90deg) translatey (100px)", "translatez (-100px)", "translatez (100px)"]; // The transform parameter var arr1 = ["rotatey (-90deg) translatex (-100px) translatez (100px)", "rotatey (90deg) translatex (100px) translatez (100px )",
"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 to 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
