HTML5transform 3D cube implementation 360 No dead-corner 3D Rotation effect _ html5 tutorial tips-

Using HTML5transform to complete the 3D cube model can achieve a three-dimensional rotation effect of 360 without dead corners. What is lacking in the United States is that the view sequence of each plane cannot be determined during rotation, if you like it, you can understand that, in order to better understand the essence of transform, you decide to complete the 3D cube model and achieve a three-dimensional rotation effect of 360 without dead corners.

However, it is difficult to judge the order of each view during rotation, and it is still not perfect. I hope someone can answer this question!

Source Code directly contributes:

The Code is as follows:

Script
/**
* The current version has the following problems:
* The zIndex Calculation of 3D Rotation is incorrect.
* There is still a lack of multiple models, common including: line, surface, vertebral body, sphere, and elliptical body.
*/
Function cuboidModel (left_init, top_init, long_init, width_init, height_init)
{
////////////////////////////////////////
// Initialize private variables
///////////////////////////////////////
// Initialize the position and size of the cube
Var left = left_init;
Var top = top_init;
Var long = long_init;
Var width = width_init;
Var height = height_init;
// Initialize the conversion angle. The default value is 0.
Var rotateX = 0;
Var rotateY = 0;
Var rotateZ = 0;
Var zIndex = 0;
// Define the p object of the six faces of the cube
Var p_front;
Var p_behind;
Var p_left;
Var p_right;
Var p_top;
Var p_bottom;

////////////////////////////////////////
// Initialize the cube
///////////////////////////////////////
// Construct six faces based on the initial position.
This. init = function (){
// Create front p
P_front = document. createElement ("p ");
P_front.className = "cuboid_side_p ";
P_front.innerHTML = "p front ";
P_front.style.backgroundColor = "# f1b2b2 ";
Document. body. appendChild (p_front );
// Create behind p
P_behind = document. createElement ("p ");
P_behind.className = "cuboid_side_p ";
P_behind.innerHTML = "p behind ";
P_behind.style.backgroundColor = "# bd91eb ";
Document. body. appendChild (p_behind );
// Create left p
P_left = document. createElement ("p ");
P_left.className = "cuboid_side_p ";
P_left.innerHTML = "p left ";
P_left.style.backgroundColor = "#64a3c3 ";
Document. body. appendChild (p_left );
// Create right p
P_right = document. createElement ("p ");
P_right.className = "cuboid_side_p ";
P_right.innerHTML = "p right ";
P_right.style.backgroundColor = "#78e797 ";
Document. body. appendChild (p_right );
// Create top p
P_top = document. createElement ("p ");
P_top.className = "cuboid_side_p ";
P_top.innerHTML = "p top ";
P_top.style.backgroundColor = "# e7db78 ";
Document. body. appendChild (p_top );
// Create a bottom p
P_bottom = document. createElement ("p ");
P_bottom.className = "cuboid_side_p ";
P_bottom.innerHTML = "p bottom ";
P_bottom.style.backgroundColor = "# e79c78 ";
Document. body. appendChild (p_bottom );
This. refresh ();
};
// Redraw
This. refresh = function ()
{
// Define the p_front Style
P_front.style.left = left + "px ";
P_front.style.top = top + "px ";
P_front.style.width = long + "px ";
P_front.style.height = height + "px ";
P_front.style.webkitTransformOrigin = "50% 50%" + (-1) * width/2) + "px ";
// Define the p_behind Style
P_behind.style.left = left + "px ";
P_behind.style.top = top + "px ";
P_behind.style.width = p_front.style.width;
P_behind.style.height = p_front.style.height;
P_behind.style.webkitTransformOrigin = "50% 50%" + (-1) * width/2) + "px ";
// Define the p_left Style
P_left.style.left = left + (long-height)/2) + "px ";
P_left.style.top = top + (height-width)/2) + "px ";
P_left.style.width = height + "px ";
P_left.style.height = width + "px ";
P_left.style.webkitTransformOrigin = "50% 50%" + (-1) * long/2) + "px ";
// Define the p_right Style
P_right.style.left = p_left.style.left;
P_right.style.top = p_left.style.top;
P_right.style.width = p_left.style.width;
P_right.style.height = p_left.style.height;
P_right.style.webkitTransformOrigin = "50% 50%" + (-1) * long/2) + "px ";
// Define the p_top Style
P_top.style.left = left + "px ";
P_top.style.top = top + (height-width)/2) + "px ";
P_top.style.width = long + "px ";
P_top.style.height = width + "px ";
P_top.style.webkitTransformOrigin = "50% 50%" + (-1) * height/2) + "px ";
// Define the p_bottom Style
P_bottom.style.left = p_top.style.left;
P_bottom.style.top = p_top.style.top;
P_bottom.style.width = p_top.style.width;
P_bottom.style.height = p_top.style.height;
P_bottom.style.webkitTransformOrigin = "50% 50%" + (-1) * height/2) + "px ";
This. rotate (rotateX, rotateY, rotateZ );
};
// Rotate the cube
This. rotate = function (x, y, z ){
RotateX = x;
RotateY = y;
RotateZ = z;
Var rotateX_front = rotateX;
Var rotateY_front = rotateY;
Var rotateZ_front = rotateZ;
// Determine the Rotation Angle of each plane
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 rotateZ_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 = rotateY_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 sequence of each plane
Var zIndex_front_default =-1;
Var zIndex_behind_default =-6;
Var zIndex_top_default =-5;
Var zIndex_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 ";
// Calculate zIndex
If (xI> = 0 & xI <1) | (xI> =-4 & xI <-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 )){
}
// Assign a value to zIndex
Eval (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 );
// Front
Var transform_rotate_front = "perspective (500px) rotateX (" + rotateX_front +
"Deg) rotateY (" + rotateY_front +
"Deg) rotateZ (" + rotateZ_front + "deg )";
P_front.style.webkitTransform = transform_rotate_front;
P_front.style.zIndex = zIndex_front;
// Behind
Var transform_rotate_behind = "perspective (500px) rotateX (" + rotateX_behind +
"Deg) rotateY (" + rotateY_behind +
"Deg) rotateZ (" + rotateZ_behind + "deg )";
P_behind.style.webkitTransform = transform_rotate_behind;
P_behind.style.zIndex = zIndex_behind;
// Left
Var transform_rotate_left = "perspective (500px) rotateX (" + rotateX_left +
"Deg) rotateZ (" + rotateZ_left +
"Deg) rotateY (" + rotateY_left + "deg )";
P_left.style.webkitTransform = transform_rotate_left;
P_left.style.zIndex = zIndex_left;
// Right
Var transform_rotate_right = "perspective (500px) rotateX (" + rotateX_right +
"Deg) rotateZ (" + rotateZ_right +
"Deg) rotateY (" + rotateY_right + "deg )";
P_right.style.webkitTransform = transform_rotate_right;
P_right.style.zIndex = zIndex_right;
// Top
Var transform_rotate_top = "perspective (500px) rotateX (" + rotateX_top +
"Deg) rotateZ (" + rotateZ_top +
"Deg) rotateY (" + rotateY_top + "deg )";
P_top.style.webkitTransform = transform_rotate_top;
P_top.style.zIndex = zIndex_top;
// Bottom
Var transform_rotate_bottom = "perspective (500px) rotateX (" + rotateX_bottom +
"Deg) rotateZ (" + rotateZ_bottom +
"Deg) rotateY (" + rotateY_bottom + "deg )";
P_bottom.style.webkitTransform = transform_rotate_bottom;
P_bottom.style.zIndex = zIndex_bottom;
};
// Reset the length, width, and height of the cube.
This. resize = function (new_long, new_width, new_height)
{
Long = new_long;
Width = new_width;
Height = new_height;
This. refresh ();
};
// Reset the position of the cube
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"). value ));
Cuboid. move (parseInt (document. getElementById ("left"). value ),
ParseInt (document. getElementById ("top"). value ));
Cuboid. rotate (parseInt (document. getElementById ("rotatex"). value ),
ParseInt (document. getElementById ("rotatey"). value ),
ParseInt (document. getElementById ("rotatez"). value ));
// Cuboid. refresh ();
}
Script

Left:Px

Top:Px

Long:Px

Width:Px

Height:Px

RotateX:Deg

RotateY:Deg

RotateZ:Deg

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