HTML5 transform three-dimensional cube (with rotation effect)

In order to better grasp the essence of transform, so decided to complete the three-dimensional cube model, can achieve 360 without dead-angle three-dimensional rotation effect.

However, it is difficult to judge the view order of each face when rotating, but it is still not solved perfectly, I hope someone can answer it!

Direct contribution to the source code:

<style>.cuboid_side_div{position:absolute;border:1px solid #333;-webkit-transition:ease all 1s;}  </style><script>/** * This release has the following issues: * Three-dimensional rotation of the zindex calculation problem * Also lacks a variety of models, common include: line, surface, vertebral body, sphere, ellipsoid and so on. */function Cuboidmodel (left_init,top_init,long_init,width_init,height_init) {/////////////////////////////////// Initialize private variable/////////////////////////////////////////initialize box position, size var left = Left_init;var top = Top_init;var Long = Long_init;var width = Width_init;var height = height_init;//Initialize transform angle, default is 0var Rotatex = 0;var Rotatey = 0;var Rotatez = 0;va R ZIndex = 0;//a Div object defining a box six polygons var div_front;var div_behind;var Div_left;var Div_right;var div_top;var div_bottom;/////// Initializes the box/////////////////////////////////////////to construct six polygons based on the initial position. This.init = function () {//create front Divdiv_front = document.createelement ("div");d iv_front.classname = "Cuboid_side_div" ;d iv_front.innerhtml = "div Front";d iv_front.style.backgroundcolor= "#f1b2b2";d ocument.body.appendChild (Div_front) ;//CreateBuilt Behind Divdiv_behind = document.createelement ("div");d iv_behind.classname = "Cuboid_side_div";d iv_behind.innerhtml = "div behind";d iv_behind.style.backgroundcolor= "#bd91eb";d ocument.body.appendChild (Div_behind);//Create left Divdiv_ left = document.createelement ("div");d iv_left.classname = ' Cuboid_side_div ';d iv_left.innerhtml = "Div Left";d iv_ Left.style.backgroundcolor= "#64a3c3";d ocument.body.appendChild (Div_left);//Create Right divdiv_right = Document.createelement ("div");d iv_right.classname = "Cuboid_side_div";d iv_right.innerhtml = "div Right";d iv_ Right.style.backgroundcolor= "#78e797";d ocument.body.appendChild (div_right);//create Top divdiv_top = Document.createelement ("div");d iv_top.classname = "Cuboid_side_div";d iv_top.innerhtml = "div top";d iv_ Top.style.backgroundcolor= "#e7db78";d ocument.body.appendChild (div_top);//create Bottom Divdiv_bottom = Document.createelement ("div");d iv_bottom.classname = "Cuboid_side_div";d iv_bottom.innerhtml = "div Bottom";d iv_ Bottom.style.backgroundcolor= "#e79c78";d ocument. Body.appendchild (Div_bottom); This.refresh ();};/ /Redraw This.refresh = function () {//define Div_front style Div_front.style.left = left+ "px";d iv_front.style.top = top+ "px";d iv_ Front.style.width = long + "px";d iv_front.style.height = height + "px";d iv_front.style.webkitTransformOrigin = "50% 50%" + (( -1) *WIDTH/2) + "px";//define div_behind style Div_behind.style.left = left+ "px";d iv_behind.style.top = top+ "px";d iv_ Behind.style.width = Div_front.style.width;div_behind.style.height = Div_front.style.height;div_ Behind.style.webkitTransformOrigin = "50% 50%" + (( -1) *WIDTH/2) + "px";//define div_left style Div_left.style.left = left+ ((Long- Height)/2) + "px";d iv_left.style.top = Top + ((height-width)/2) + "px";d iv_left.style.width = height + "px";d iv_left.styl E.height = width + "px";d iv_left.style.webkitTransformOrigin = "50% 50%" + (( -1) * LONG/2) + "px";//define Div_right style div_right. Style.left = Div_left.style.left;div_right.style.top = Div_left.style.top;div_right.style.width = Div_ Left.style.width;div_right.style.height = Div_left.Style.height;div_right.style.webkittransformorigin = "50% 50%" + (( -1) * LONG/2) + "px";//define Div_top style Div_top.style.left = left+ "px";d iv_top.style.top = top+ ((height-width)/2) + "px";d iv_top.style.width = long + "px";d iv_top.style.height = wi DTH + "px";d iv_top.style.webkitTransformOrigin = "50% 50%" + (( -1) * HEIGHT/2) + "px";//define Div_bottom style Div_ Bottom.style.left = Div_top.style.left;div_bottom.style.top = Div_top.style.top;div_bottom.style.width = Div_ Top.style.width;div_bottom.style.height = Div_top.style.height;div_bottom.style.webkittransformorigin = "50% 50%" + ( ( -1) * HEIGHT/2) + "px"; this.rotate (Rotatex,rotatey,rotatez);};/ /rotated Cube this.rotate = function (x, y, z) {Rotatex = X;rotatey = Y;rotatez = Z;var Rotatex_front = Rotatex;var Rotatey_front = r Otatey;var Rotatez_front = rotatez;//Determine the rotation angle of each face var rotatex_behind = Rotatex_front+180;var Rotatey_behind = RotateY_front * ( -1); var rotatez_behind = Rotatez_front * ( -1); var rotatex_top = Rotatex_front+90;var Rotatey_top = Rotatez_front;var ro TatEz_top = Rotatey_front * ( -1), var rotatex_bottom = Rotatex_front-90;var Rotatey_bottom = Rotatez_front * ( -1); var rotateZ_ Bottom = Rotatey_front;var rotatex_left = rotatex_front + 90;var rotatey_left = Rotatez_front-90;var RotateZ_left = Rota Tey_front * ( -1); var rotatex_right = Rotatex_front + 90;var rotatey_right = Rotatez_front + 90;var rotatez_right = RotateY _front * (-1);//Determine the z-axis display order of each polygon var zindex_front_default = -1;var Zindex_behind_default = -6;var Zindex_top_default = -5;var Z  Index_bottom_default = -2;var Zindex_left_default = -4;var Zindex_right_default = -3;var XI = (rotatex_front/90)% 4;var YI = (rotatey_front/90)% 4;var ZI = (rotatez_front/90)% 4; var Zindex_matrix = new Array (), for (var i = 0; i < 3;i++) {Zindex_matrix.push (new array ());} Zindex_matrix = [["]," Zindex_top "," "],[" Zindex_left "," Zindex_front "," Zindex_right "],[" "," Zindex_bottom "," "]];var Zindex_matrix_behind = "Zindex_behind";//Calculation zindexif (xi >= 0 && XI < 1) | | (xi >=-4 && XI &Lt -3)) {} else if (XI >= 1 && XI < 2) | | (xi >=-3 && XI <-2)) {var zindex_matrix_tmp = zindex_matrix[0][1];zindex_matrix[0][1] = zindex_matrix[1][1];zindex_matrix[1][1] = zIndex_ MATRIX[1][2];ZINDEX_MATRIX[1][2] = Zindex_matrix_behind;zindex_matrix_behind = zindex_matrix_tmp;} else if ((XI >= 2 && XI < 3) | | (xi >=-2 && XI <-1)) {var zindex_matrix_tmp = zindex_matrix[0][1];zindex_matrix[0][1] = zindex_matrix[2][1];zindex_matrix[2][1] = zIndex_ Matrix_tmp;zindex_matrix_tmp = zindex_matrix[1][1];zindex_matrix[1][1] = Zindex_matrix_behind;zindex_matrix_behind = Zindex_matrix_tmp;} else if ((XI >= 3 && XI < 4) | | (xi >=-1 && XI < 0)) {var zindex_matrix_tmp = zindex_matrix[0][1];zindex_matrix[0][1] = Zindex_matrix_behind;zindex_matrix_behind = ZIndex _MATRIX[2][1];ZINDEX_MATRIX[2][1] = zindex_matrix[1][1];zindex_matrix[1][1] = zindex_matrix_tmp;} if ((Yi > 0 && yi <= 1) | | (Yi >-4 && Yi <=-3)) {var zindex_matrix_tmp = zindex_matrix[1][0];zindex_matrix[1][0] = zindex_matrix_behind;zindex_matrix_ behind = zindex_matrix[1][2];zindex_matrix[1][2] = zindex_matrix[1][1];zindex_matrix[1][1] = zIndex_matrix_tmp;} else if ((Yi > 1 && yi <= 2) | | (Yi >-3 && yi <=-2)) {var zindex_matrix_tmp = zindex_matrix[1][0];zindex_matrix[1][0] = zindex_matrix[1][2];zindex_matrix[1][2] = zIndex_ Matrix_tmp;zindex_matrix_tmp = zindex_matrix[1][1];zindex_matrix[1][1] = Zindex_matrix_behind;zindex_matrix_behind = Zindex_matrix_tmp;} else if ((Yi > 2 && yi <= 3) | | (Yi >-2 && yi <=-1)) {var zindex_matrix_tmp = zindex_matrix[1][0];zindex_matrix[1][0] = zindex_matrix[1][1];zindex_matrix[1][1] = zIndex_ MATRIX[1][2];ZINDEX_MATRIX[1][2] = Zindex_matrix_behind;zindex_matrix_behind = zindex_matrix_tmp;} else if ((Yi > 3 && yi <= 4) | | (Yi >-1 && yi <= 0)) {}if (ZI > 0 && zI <= 1) | | (ZI >-4 && ZI <=-3)) {var zindex_matrix_tmp = zindex_matrix[0][1];zindex_matrix[0][1] = zindex_matrix[1][0];zindex_matrix[1][ 0] = zindex_matrix[2][1];zindex_matrix[2][1] = zindex_matrix[1][2];zindex_matrix[1][2] = zIndex_matrix_tmp;} else if ((ZI > 1 && zI <= 2) | | (ZI >-3 && ZI <=-2)) {var zindex_matrix_tmp = zindex_matrix[0][1];zindex_matrix[0][1] = zindex_matrix[2][1];zindex_matrix[2][1] = zIndex_ Matrix_tmp;zindex_matrix_tmp = zindex_matrix[1][0];zindex_matrix[1][0] = zindex_matrix[1][2];zindex_matrix[1][2] = Zindex_matrix_tmp;} else if ((ZI > 2 && zI <= 3) | | (ZI >-2 && ZI <=-1)) {var zindex_matrix_tmp = zindex_matrix[0][1];zindex_matrix[0][1] = zindex_matrix[1][2];zindex_matrix[1][2] = zIndex_ MATRIX[2][1];ZINDEX_MATRIX[2][1] = zindex_matrix[1][0];zindex_matrix[1][0] = zindex_matrix_tmp;} else if ((ZI > 3 && zI <= 4) | | (ZI >-1 && zI <= 0)) {}//Assignment zindexeval (zindex_matrix[0][1]+ "=" +zindex_top_default); Eval (zindex_matrix[1][0]+ "=" +zindex_left_default), eval (zindex_matrix[1][1]+ "=" +zindex_front_default); Eval (zIndex_ matrix[1][2]+ "=" +zindex_right_default), eval (zindex_matrix[2][1]+ "=" +zindex_bottom_default); Eval (zIndex_matrix_ behind+ "=" +zindex_behind_default)//frontvar Transform_rotate_front = "Perspective (500px) Rotatex (" +rotateX_front+ "deg) Rotatey (" +rotatey_front+ "deg) Rotatez (" +rotatez_front+ "deg)";d iv_front.style.webkitTransform = transform_ Rotate_front;div_front.style.zindex = Zindex_front;//behindvar Transform_rotate_behind = "Perspective (500px) RotateX ("+rotatex_behind+" deg) Rotatey ("+rotatey_behind+" deg) Rotatez ("+rotatez_behind+" deg) ";d iv_ Behind.style.webkitTransform = Transform_rotate_behind;div_behind.style.zindex = Zindex_behind;//leftvar transform_ Rotate_left = "Perspective (500px) Rotatex (" +rotatex_left+ "deg) Rotatez (" +rotatez_left+ "deg) Rotatey (" +rotatey_left+ "deg)";d iv_left.style.webkitTransform = Transform_rotate_left;div_left.style.zindex = Zindex_left;//rightvar TransforM_rotate_right = "Perspective (500px) Rotatex (" +rotatex_right+ "deg) Rotatez (" +rotatez_right+ "deg) Rotatey (" +rotateY_ right+ "deg)";d iv_right.style.webkitTransform = Transform_rotate_right;div_right.style.zindex = zindex_right;// Topvar Transform_rotate_top = "Perspective (500px) Rotatex (" +rotatex_top+ "deg) Rotatez (" +rotatez_top+ "deg) RotateY (" + rotatey_top+ "deg)";d iv_top.style.webkitTransform = Transform_rotate_top;div_top.style.zindex = zindex_top;// Bottomvar Transform_rotate_bottom = "Perspective (500px) Rotatex (" +rotatex_bottom+ "deg) Rotatez (" +rotatez_bottom+ " DEG) Rotatey ("+rotatey_bottom+" deg) ";d iv_bottom.style.webkitTransform = transform_rotate_bottom;div_ Bottom.style.zIndex = zindex_bottom;};/ /resets the box's length, width, height this.resize = function (New_long, new_width, new_height) {long = New_long;width = New_width;height = New_ Height;this.refresh ();};/ /resets the position of the box This.move = function (new_left,new_top) {top = New_top;left = New_left;this.refresh ();};} Function transform () {cuboid.resize (parseint (Document.getelEmentbyid ("Long"). Value), parseint (document.getElementById ("width"). Value), parseint (document.getElementById (" Height "), Cuboid.move (parseint (document.getElementById (" left "). Value), parseint (document.getElementById ( "Top"), Cuboid.rotate (parseint (document.getElementById ("Rotatex"). Value), parseint ( document.getElementById ("Rotatey"). Value), parseint (document.getElementById ("Rotatez"). value);//cuboid.refresh ();} </script><div style= "position:absolute;border:1px solid #333; Top:240px;left:100px;width:1000px;height: 360px; " >left:<input id= "left" value= "></input>px<br>top:<input id=" Top "value=" ></" Input>px<br>long:<input id= "Long" value= "></input>px<br>width:<input id=" width " Value= "></input>px<br>height:<input id=" height "value=" ></input>px<br> Rotatex: <input id= "Rotatex" value= "0" ></input>deg<br>rotatey: <input id= "RotateY" value= "0" ></inpUt>deg<br>rotatez: <input id= "Rotatez" value= "0" ></input>deg<br><input type= "button" Value= "OK" onclick= "transform ()" ></input><br><label id= "status" ></label></div> <script>var cuboid = new Cuboidmodel (parseint (document.getElementById ("left"). Value), parseint ( document.getElementById ("Top"). Value), parseint (document.getElementById ("Long"). Value), parseint ( document.getElementById ("width"). Value), parseint (document.getElementById ("height"). value); Cuboid.init (); </ Script>