HTML5 transform 3D cube (with rotation effect), html5transform

HTML5 transform 3D cube (with rotation effect), html5transform

In order to better understand the essence of transform, we decided 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:

<Style>. cuboid_side_div {position: absolute; border: 1px solid #333;-webkit-transition: Every all 1 s ;} </style> <script>/*** the current version has the following problems: * problems with 3D zIndex calculation * many models are missing, including: line, surface, vertebral body, sphere, elliptical body, etc. */Function cuboidModel (left_init, top_init, long_init, width_init, height_init) {/////////////////////////////////////// /// initialize the private variable ////////////////////////////////// ////// initialize the rectangular position and size 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 0var rotateX = 0; var rotateY = 0; var rotateZ = 0; var zIndex = 0; // defines the div object var div_front and var div of the six faces of the cube. _ Behind; var div_left; var div_right; var div_top; var div_bottom; //////////////////////////////////////// // initialize the Rectangular Box //////////////////////////////////// ///// construct six faces based on the initial position. This. init = function () {// create front divdiv_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 divdiv_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 divdiv_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 divdiv_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 divdiv_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 divdiv_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 () ;}; // re-paint this. refresh = function () {// defines 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 align = left + "px"; align = 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"; // defines 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 "; align = "50% 50%" + (-1) * long/2) + "px"; // defines div_right style div_right.style.left = align; align = align; div_right.style.width = div_left.style.width; div_right.style.height = div_left.style.height; Height = "50% 50%" + (-1) * long/2) + "px"; // defines 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 "; height = "50% 50%" + (-1) * height/2) + "px"; // defines the div_bottom style border = div_top.style.left; border = div_top.style.top; border = 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 rows = rotateX_front-90; var rotateY_bottom = rotateZ_front * (-1 ); var rows = rotateY_front; var rotateX_left = rotateX_front + 90; var rotateY_left = rotateZ_front-90; var rows = rotateY_front * (-1); var rotateX_right = rotateX_front + 90; var rotateY_right = rotateZ_front + 90; var rotateZ_right = rotateY_front * (-1); // determine the order of displaying the Z axes 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 zIndexif (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; Attributes = 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; Attributes = 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 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 (region + "=" + zIndex_behind_default); // frontvar transform_rotate_front = "perspective (500px) rotateX ("+ rotateX_front +" deg) rotateY ("+ rotateY_front +" deg) rotateZ ("+ rotateZ_front +" deg) "; region = transform_rotate_front; region = zIndex_front; // behindvar percent = "perspective (500px) rotateX (" + rotateX_behind + "deg) rotateY (" + rotateY_behind + "deg) rotateZ (" + rotateZ_behind + "deg )"; rows = inline; rows = zIndex_behind; // leftvar transform_rotate_left = "perspective (500px) rotateX (" + rotateX_left + "deg) rotateZ (" + rotateZ_left + "deg) rotateY ("+ rotateY_left +" deg) "; feature = transform_rotate_left; feature = zIndex_left; // rightvar transform_rotate_right =" perspective (500px) rotateX ("+ rotateX_right +" deg) rotateZ ("+ rotateZ_right +" deg) rotateY ("+ rotateY_right +" deg) "; Weight = transform_rotate_right; Weight = zIndex_right; // topvar transform_rotate_top =" perspective (500px) rotateX ("+ rotateX_top +" deg) rotateZ ("+ rotateZ_top +" deg) rotateY ("+ rotateY_top +" deg) "; Role = transform_rotate_top; Role = zIndex_top; // bottomvar balance = "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. 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 <br> top: <input id = "top" value = "50"> </input> px <br> long: <input id = "long" value = "100"> </input> px <br> width: <input id = "width" value = "60"> </input> px <br> height: <input id = "height" value = "80"> </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>

In html5, where is the center of the rotate () function? How do I set the center of the circle? Can I use setTransform? Or translate ()?

Indeed
Context. translate (center x, center y );

The next step is the circle
You need to set a rotation speed for example, 6000 ms.
Use custom functions animateRotate () and function draw ()

AnimateRotate (){
// Enter the desired circle effect here
Draw ()
}

Draw (){
Context. translate (cx, cy );
Context. rotate (Math. PI/180) * Each rotation time * per Angle
}

It's hard to explain... I don't know what the rect is.

How does flash achieve image rotation like a cube?

It is difficult to use two-dimensional software to simulate 3d effects. Unless your flat software technology is very good, you can either directly use the as or import the flash with 3d software.

Swift 3d? Or 3dmax, drag a cube and make a rotation animation. swift3d will direct swf, 3 DSMAX will guide the image sequence, and flash will be ready for use.
Tutorial on rotating cubes with swift 3d