Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use HTML5 transform three-dimensional cube to achieve three-dimensional rotation effect", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to use HTML5 transform 3D cube to achieve 3D rotation effect"!

The code is as follows:

.cuboid _ side_div {

Position:absolute

Border:1px solid # 333

-webkit-transition:ease all 1s

}

/ * *

* there are the following problems in this version:

* there is a problem with the zIndex calculation of 3D rotation

* there is still a lack of a variety of models, including lines, surfaces, vertebrae, spheres, ellipsoids and so on.

, /

Function cuboidModel (left_init,top_init,long_init,width_init,height_init)

{

/ /

/ / initialize private variables

/ /

/ / initialize the box 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 change angle. Default is 0.

Var rotateX = 0

Var rotateY = 0

Var rotateZ = 0

Var zIndex = 0

/ / define the div object of the six faces of the box

Var div_front

Var div_behind

Var div_left

Var div_right

Var div_top

Var div_bottom

/ /

/ / initialize the box

/ /

/ / construct six faces according to the initial position.

This.init = function () {

/ / create a front div

Div_front = document.createElement ("div")

Div_front.className = "cuboid_side_div"

Div_ front [XSS _ clean] = "div front"

Div_front.style.backgroundColor= "# f1b2b2"

Document.body.appendChild (div_front)

/ / create a behind div

Div_behind = document.createElement ("div")

Div_behind.className = "cuboid_side_div"

Div_ behind [XSS _ clean] = "div behind"

Div_behind.style.backgroundColor= "# bd91eb"

Document.body.appendChild (div_behind)

/ / create a left div

Div_left = document.createElement ("div")

Div_left.className = "cuboid_side_div"

Div_ left [XSS _ clean] = "div left"

Div_left.style.backgroundColor= "# 64a3c3"

Document.body.appendChild (div_left)

/ / create a right div

Div_right = document.createElement ("div")

Div_right.className = "cuboid_side_div"

Div_ Right[ XSS _ clean] = "div right"

Div_right.style.backgroundColor= "# 78e797"

Document.body.appendChild (div_right)

/ / create a top div

Div_top = document.createElement ("div")

Div_top.className = "cuboid_side_div"

Div_ top [XSS _ clean] = "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 [XSS _ clean] = "div bottom"

Div_bottom.style.backgroundColor= "# e79c78"

Document.body.appendChild (div_bottom)

This.refresh ()

}

/ / redraw

This.refresh = function ()

{

/ / define 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%" + ((- 1) * width / 2) + "px"

/ / define 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%" + ((- 1) * width / 2) + "px"

/ / define 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%" + ((- 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%" + ((- 1) * long / 2) + "px"

/ / define 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%" + ((- 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%" + ((- 1) * height / 2) + "px"

This.rotate (rotateX,rotateY,rotateZ)

}

/ / rotate the cube

This.rotate = function (xmai yjinz) {

RotateX = x

RotateY = y

RotateZ = z

Var rotateX_front = rotateX

Var rotateY_front = rotateY

Var rotateZ_front = rotateZ

/ / judge 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 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)

/ / judge the z-axis display order of each face

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"; //计算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-4 & & yI 1 & & yI-3 & & yI 2 & & yI-2 & & yI 3 & & yI-1 & & yI 0 & & zI-4 & & zI 1 & zI 2 & & zI-2 & & zI 3 & & zI-1 & zI

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.