HTML5 transform 3D cube achieves 360 No dead-corner 3D Rotation effect, html5transform

HTML5 transform 3D cube achieves 360 No dead-corner 3D Rotation effect, html5transform
Using HTML5 transform 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:
<Style>
. Cuboid_side_div {
Position: absolute;
Border: 1px solid #333;
-Webkit-transition: interval all 1 s;
}
</Style>
<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 div object of the cube with six faces
Var div_front;
Var div_behind;
Var div_left;
Var div_right;
Var div_top;
Var div_bottom;

////////////////////////////////////////
// Initialize the cube
///////////////////////////////////////
// Construct six faces based on the initial position.
This. init = function (){
// Create a front div
Div_front = document. createElement ("div ");
Div_front.className = "cuboid_side_div ";
Div_front.innerHTML = "div front ";
Div_front.style.backgroundColor = "# f1b2b2 ";
Document. body. appendChild (div_front );
// Create behind div
Div_behind = document. createElement ("div ");
Div_behind.className = "cuboid_side_div ";
Div_behind.innerHTML = "div behind ";
Div_behind.style.backgroundColor = "# bd91eb ";
Document. body. appendChild (div_behind );
// Create left div
Div_left = document. createElement ("div ");
Div_left.className = "cuboid_side_div ";
Div_left.innerHTML = "div left ";
Div_left.style.backgroundColor = "#64a3c3 ";
Document. body. appendChild (div_left );
// Create right div
Div_right = document. createElement ("div ");
Div_right.className = "cuboid_side_div ";
Div_right.innerHTML = "div right ";
Div_right.style.backgroundColor = "#78e797 ";
Document. body. appendChild (div_right );
// Create top div
Div_top = document. createElement ("div ");
Div_top.className = "cuboid_side_div ";
Div_top.innerHTML = "div top ";
Div_top.style.backgroundColor = "# e7db78 ";
Document. body. appendChild (div_top );
// Create a bottom div
Div_bottom = document. createElement ("div ");
Div_bottom.className = "cuboid_side_div ";
Div_bottom.innerHTML = "div bottom ";
Div_bottom.style.backgroundColor = "# e79c78 ";
Document. body. appendChild (div_bottom );
This. refresh ();
};
// Redraw
This. refresh = function ()
{
// Define the div_front Style
Div_front.style.left = left + "px ";
Div_front.style.top = top + "px ";
Div_front.style.width = long + "px ";
Div_front.style.height = height + "px ";
Div_front.style.webkitTransformOrigin = "50% 50%" + (-1) * width/2) + "px ";
// Define the div_behind Style
Div_behind.style.left = left + "px ";
Div_behind.style.top = top + "px ";
Div_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 the div_left Style
Div_left.style.left = left + (long-height)/2) + "px ";
Div_left.style.top = top + (height-width)/2) + "px ";
Div_left.style.width = height + "px ";
Div_left.style.height = width + "px ";
Div_left.style.webkitTransformOrigin = "50% 50%" + (-1) * long/2) + "px ";
// Define the 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 the div_top Style
Div_top.style.left = left + "px ";
Div_top.style.top = top + (height-width)/2) + "px ";
Div_top.style.width = long + "px ";
Div_top.style.height = width + "px ";
Div_top.style.webkitTransformOrigin = "50% 50%" + (-1) * height/2) + "px ";
// Define the 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 );
};
// 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 )";
Div_front.style.webkitTransform = transform_rotate_front;
Div_front.style.zIndex = zIndex_front;
// Behind
Var transform_rotate_behind = "perspective (500px) rotateX (" + rotateX_behind +
"Deg) rotateY (" + rotateY_behind +
"Deg) rotateZ (" + rotateZ_behind + "deg )";
Div_behind.style.webkitTransform = transform_rotate_behind;
Div_behind.style.zIndex = zIndex_behind;
// Left
Var transform_rotate_left = "perspective (500px) rotateX (" + rotateX_left +
"Deg) rotateZ (" + rotateZ_left +
"Deg) rotateY (" + rotateY_left + "deg )";
Div_left.style.webkitTransform = transform_rotate_left;
Div_left.style.zIndex = zIndex_left;
// Right
Var transform_rotate_right = "perspective (500px) rotateX (" + rotateX_right +
"Deg) rotateZ (" + rotateZ_right +
"Deg) rotateY (" + rotateY_right + "deg )";
Div_right.style.webkitTransform = transform_rotate_right;
Div_right.style.zIndex = zIndex_right;
// Top
Var transform_rotate_top = "perspective (500px) rotateX (" + rotateX_top +
"Deg) rotateZ (" + rotateZ_top +
"Deg) rotateY (" + rotateY_top + "deg )";
Div_top.style.webkitTransform = transform_rotate_top;
Div_top.style.zIndex = zIndex_top;
// Bottom
Var transform_rotate_bottom = "perspective (500px) rotateX (" + rotateX_bottom +
"Deg) rotateZ (" + rotateZ_bottom +
"Deg) rotateY (" + rotateY_bottom + "deg )";
Div_bottom.style.webkitTransform = transform_rotate_bottom;
Div_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>
<Div style = "position: absolute; border: 1px solid #333; top: 240px; left: 100px; width: 1000px; height: 360px;">
Left: <input id = "left" value = "100"> </input> px

Top: <input id = "top" value = "50"> </input> px

Long: <input id = "long" value = "100"> </input> px

Width: <input id = "width" value = "60"> </input> px

Height: <input id = "height" value = "80"> </input> px

RotateX: <input id = "rotatex" value = "0"> </input> deg

RotateY: <input id = "rotatey" value = "0"> </input> deg

RotateZ: <input id = "rotatez" value = "0"> </input> deg

<Input type = "button" value = "OK" onclick = "transform ()"> </input>

<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>

How to Use html5, css and JavaScript to achieve 360 ° rotation

He has a total of 72 images. When the mouse slides, he calculates which image to display based on the distance between the mouse slides and the index of the currently displayed image.

Html5 3D stunning element periodic table 3D image wall effect code someone has studied this

It's quite easy to teach you .. I can't upload this broken speed picture.