Mit der HTML5-Transformation eines dreidimensionalen Würfels wird ein dreidimensionaler 360-Grad-Rotationseffekt ohne Sackgassen erzielt. HTML5-Tutorial-Kenntnisse

Um das Wesen der Transformation besser zu verstehen, haben wir uns entschieden, ein dreidimensionales Würfelmodell zu erstellen, das einen dreidimensionalen 360-Grad-Rotationseffekt ohne Sackgassen erzielen kann.

Allerdings ist es schwierig, die Ansichtsreihenfolge jedes Gesichts beim Drehen zu bestimmen, und es ist noch nicht perfekt gelöst. Ich hoffe, jemand kann es beantworten!

Der Quellcode wird direkt beigesteuert:

Kopieren Sie den Code

Der Code lautet wie folgt:

<script> ////////////////////////////////////// <br>//Private Variablen initialisieren<br>/ ////////////////////////////////////// <br>//Initialisiere den Quader Position und Größe<br>var left = left_init; <br>var long = long_init; <br>var height = height_init; Transformationswinkel, der Standardwert ist 0 <br>varRotateY = 0; <br>Var ZIndex = 0; Seiten des Quaders <br>var div_behind; <br>var div_top; <br><br> ///////// /////////////////////////// <br>//Quader initialisieren<br>/// ////////// ////////////////////////// <br>//Konstruieren Sie sechs Gesichter basierend auf der Initiale Position. <br>this.init = function() { <br>//Create front div <br>div_front = document.createElement("div"); <br>div_front.className = "cuboid_side_div"; = "div front"; <br>div_front.style.backgroundColor="#f1b2b2"; <br>document.body.appendChild(div_front); <br>//Create behind div <br>div_behind = document.createElement(" div"); <br>div_behind.className = "cuboid_side_div"; <br>div_behind.innerHTML = "div behind"; <br>div_behind.style.backgroundColor="#bd91eb"; <br>document.body.appendChild( div_behind); <br>//Create left div <br>div_left = document.createElement("div"); <br>div_left.innerHTML = "div left"; >div_left.style.backgroundColor="#64a3c3"; <br>document.body.appendChild(div_left); <br>//Create right div <br>div_right = document.createElement("div"); .className = "cuboid_side_div"; <br>div_right.innerHTML = "div_right"; <br>div_right.style.backgroundColor="<br>document.body.appendChild(div_right); Top-Div erstellen <br>div_top = document.createElement("div"); <br>div_top.className = "cuboid_side_div" <br>div_top.innerHTML = "div top" <br>div_top.style.backgroundColor=" #e7db78"; <br>document.body.appendChild(div_top); <br>//Unteres Div erstellen <br>div_bottom = document.createElement("div"); <br>div_bottom.className = "cuboid_side_div"; <br>div_bottom.innerHTML = "div bottom"; <br>div_bottom.style.backgroundColor="#e79c78" <br>this.refresh(); ; <br>//Redraw<br>this.refresh = function() <br>{ <br>//Div_front-Stil definieren <br>div_front.style.left = left "px"; top = top "px"; <br>div_front.style.width = long "px"; <br>div_front.style.height = height "px"; <br>div_front.style.webkitTransformOrigin = "50% 50%" ((-1)*width / 2) "px"; <br>//Div_behind-Stil definieren<br>div_behind.style.left = left "px"; <br>div_behind.style.top = top "px" ; <br>div_behind.style.width = div_front.style.width; <br>div_behind.style.height = div_front.style.height; <br>div_behind.style.webkitTransformOrigin = "50% 50% " ((-1 ) *width / 2) "px"; <br>//Div_left-Stil definieren <br>div_left.style.left = left ((long - height) / 2) "px"; ((height - width) / 2) "px"; <br>div_left.style.width = height "px"; <br>div_left.style.height = width "px"; "50% 50%" ((-1) * long /2 ) "px"; <br>//Div_right-Stil definieren<br>div_right.style.left = div_left.style.left; top = div_left.style.top; <br>div_right.style.width = div_left.style.width; <br>div_right.style.height = div_left.style.height; <br>div_right.style.webkitTransformOrigin = "50 % 50 % " ((-1) * long /2 ) "px"; <br>//Div_top-Stil definieren<br>div_top.style.left = left "px"; <br>div_top.style.top = top ( (Höhe - Breite)/ 2) "px"; <br>div_top.style.width = long "px"; <br>div_top.style.height = width "px"; 50 % 50 % " ((-1) * height /2 ) "px"; <br>//Div_bottom-Stil definieren <br>div_bottom.style.left = div_top.style.left; <br>div_bottom.style. top = div_top.style.top; <br>div_bottom.style.width = div_top.style.width; <br>div_bottom.style.height = div_top.style.height; <br>div_bottom.style.webkitTransformOrigin = "50% 50 % " ((-1) * height /2 ) "px"; <br>this.rotate(rotateX,rotateY,rotateZ); <br>}; <br>//Den Würfel drehen<br>this.rotate = function(x,y,z) { <br>rotateX = x; <br>rotateZ = z;var rotierenY_front = rotierenY; <br>var rotierenZ_front = rotierenZ; <br>//判断各个面旋转角度 <br>var rotationX_behind = rotationX_front 180; <br>var rotationY_behind = rotationY_front * (-1); <br>var rotateZ_behind = rotateZ_front * (-1); <br>var rotierenX_top = rotierenX_front 90; <br>var rotierenY_top = rotierenZ_front; <br>var rotierenZ_top = rotierenY_front * (-1); <br>var rotierenX_bottom = rotierenX_front-90; <br>var rotierenY_bottom = rotierenZ_front * (-1); <br>var rotateZ_bottom = rotationY_front; <br>var rotierenX_left = rotierenX_front 90; <br>var rotateY_left = rotateZ_front - 90; <br>var rotierenZ_left = rotierenY_front * (-1); <br>var rotierenX_right = rotierenX_front 90; <br>var rotateY_right = rotateZ_front 90; <br>var rotateZ_right = rotationY_front * (-1); <br>//判断各个面的z轴显示顺序 <br>var zIndex_front_default = -1; <br>var zIndex_behind_default = -6; <br>var zIndex_top_default = -5; <br>var zIndex_bottom_default = -2; <br>var zIndex_left_default = -4; <br>var zIndex_right_default = -3; <br>var xI = (rotateX_front / 90) % 4; <br>var yI = (rotateY_front / 90) % 4; <br>var zI = (rotateZ_front / 90) % 4; <br>var zIndex_matrix = new Array(); <br>for(var i = 0; i < 3;i ) { <br />zIndex_matrix.push(new Array()); <br />} <br />zIndex_matrix = [["","zIndex_top",""], <br />["zIndex_left","zIndex_front","zIndex_right"], <br />["","zIndex_bottom", ""]]; <br />var zIndex_matrix_behind = "zIndex_behind"; <br />//计算zIndex <br />if((xI >= 0 && xI < 1) ||(xI >= -4 && xI < -3)) { <br />} else if(( xI >= 1 && xI < 2) ||(xI >= -3 && xI < -2)) { <br />var zIndex_matrix_tmp = zIndex_matrix[0][1]; <br />zIndex_matrix[0][1] = zIndex_matrix[1][1]; <br />zIndex_matrix[1][1] = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix_behind; <br />zIndex_matrix_behind = zIndex_matrix_tmp; <br />} else if((xI >= 2 && xI < 3) ||(xI >= -2 && xI < -1)) { <br />var zIndex_matrix_tmp = zIndex_matrix[0][1] ; <br />zIndex_matrix[0][1] = zIndex_matrix[2][1]; <br />zIndex_matrix[2][1] = zIndex_matrix_tmp; <br />zIndex_matrix_tmp = zIndex_matrix[1][1]; <br />zIndex_matrix[1][1] = zIndex_matrix_behind; <br />zIndex_matrix_behind = zIndex_matrix_tmp; <br />} else if((xI >= 3 && xI < 4) ||(xI >= -1 && xI < 0)) { <br />var zIndex_matrix_tmp = zIndex_matrix[0][1]; <br />zIndex_matrix[0][1] = zIndex_matrix_behind; <br />zIndex_matrix_behind = zIndex_matrix[2][1]; <br />zIndex_matrix[2][1] = zIndex_matrix[1][1]; <br />zIndex_matrix[1][1] = zIndex_matrix_tmp; <br />} <br />if((yI > 0 && yI <= 1) ||(yI > -4 && yI <= -3)) { <br />var zIndex_matrix_tmp = zIndex_matrix[1][ 0]; <br />zIndex_matrix[1][0] = zIndex_matrix_behind; <br />zIndex_matrix_behind = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix[1][1]; <br />zIndex_matrix[1][1] = zIndex_matrix_tmp; <br />} else if((yI > 1 && yI <= 2) ||(yI > -3 && yI <= -2)) { <br />var zIndex_matrix_tmp = zIndex_matrix[1][0] ; <br />zIndex_matrix[1][0] = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix_tmp; <br />zIndex_matrix_tmp = zIndex_matrix[1][1]; <br />zIndex_matrix[1][1] = zIndex_matrix_behind; <br />zIndex_matrix_behind = zIndex_matrix_tmp; <br />} else if((yI > 2 && yI <= 3) ||(yI > -2 && yI <= -1)) { <br />var zIndex_matrix_tmp = zIndex_matrix[1][0] ; <br />zIndex_matrix[1][0] = zIndex_matrix[1][1]; <br />zIndex_matrix[1][1] = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix_behind; <br />zIndex_matrix_behind = zIndex_matrix_tmp; <br />} else if((yI > 3 && yI <= 4) ||(yI > -1 && yI <= 0)) { <br />} <br /><br />if((zI > 0 && zI <= 1) ||(zI > -4 && zI <= -3)) { <br />var zIndex_matrix_tmp = zIndex_matrix[0][1]; <br />zIndex_matrix[0][1] = zIndex_matrix[1][0]; <br />zIndex_matrix[1][0] = zIndex_matrix[2][1]; <br />zIndex_matrix[2][1] = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix_tmp; <br />} else if((zI > 1 && zI <= 2) ||(zI > -3 && zI <= -2)) { <br />var zIndex_matrix_tmp = zIndex_matrix[0][1] ; <br />zIndex_matrix[0][1] = zIndex_matrix[2][1]; <br />zIndex_matrix[2][1] = zIndex_matrix_tmp; <br />zIndex_matrix_tmp = zIndex_matrix[1][0]; <br />zIndex_matrix[1][0] = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix_tmp; <br />} else if((zI > 2 && zI <= 3) ||(zI > -2 && zI <= -1)) { <br />var zIndex_matrix_tmp = zIndex_matrix[0][1] ; <br />zIndex_matrix[0][1] = zIndex_matrix[1][2]; <br />zIndex_matrix[1][2] = zIndex_matrix[2][1]; <br />zIndex_matrix[2][1] = zIndex_matrix[1][0]; <br />zIndex_matrix[1][0] = zIndex_matrix_tmp; <br />} else if((zI > 3 && zI <= 4) ||(zI > -1 && zI <= 0)) { <br />} <br />//赋值zIndex <br /> eval(zIndex_matrix[0][1] "=" zIndex_top_default); <br />eval(zIndex_matrix[1][0] "=" zIndex_left_default); <br />eval(zIndex_matrix[1][1] "=" zIndex_front_default); <br />eval(zIndex_matrix[1][2] "=" zIndex_right_default); <br />eval(zIndex_matrix[2][1] "=" zIndex_bottom_default); <br />eval(zIndex_matrix_behind "=" zIndex_behind_default); <br />//front <br />var transform_rotate_front = "perspective(500px) rotateX(" rotateX_front <br />"deg) rotateY(" rotateY_front <br />"deg) rotateZ(" rotateZ_front "deg)"; <br />div_front.style.webkitTransform = transform_rotate_front; <br />div_front.style.zIndex = zIndex_front; <br />//behind <br />var transform_rotate_behind = "perspective(500px) rotateX(" rotateX_behind <br />"deg) rotateY(" rotateY_behind <br />"deg) rotateZ(" rotateZ_behind "deg)"; <br />div_behind.style.webkitTransform = transform_rotate_behind; <br />div_behind.style.zIndex = zIndex_behind; <br />//left <br />var transform_rotate_left = "perspective(500px) rotateX(" rotateX_left <br />"deg) rotateZ(" rotateZ_left <br />"deg) rotateY(" rotateY_left "deg)"; <br />div_left.style.webkitTransform = transform_rotate_left; <br />div_left.style.zIndex = zIndex_left; <br />//right <br />var transform_rotate_right = "perspective(500px) rotateX(" rotateX_right <br />"deg) rotateZ(" rotateZ_right <br />"deg) rotateY(" rotateY_right "deg)"; <br />div_right.style.webkitTransform = transform_rotate_right; <br />div_right.style.zIndex = zIndex_right; <br />//top <br />var transform_rotate_top = "perspective(500px) rotateX(" rotateX_top <br />"deg) rotateZ(" rotateZ_top <br />"deg) rotateY(" rotateY_top "deg)"; <br />div_top.style.webkitTransform = transform_rotate_top; <br />div_top.style.zIndex = zIndex_top; <br />//bottom <br />var transform_rotate_bottom = "perspective(500px) rotateX(" rotateX_bottom <br />"deg) rotateZ(" rotateZ_bottom <br />"deg) rotateY(" rotateY_bottom "deg)"; <br />div_bottom.style.webkitTransform = transform_rotate_bottom; <br />div_bottom.style.zIndex = zIndex_bottom; <br />} ; <br />//重置长方体的长、宽、高 <br />this.resize = function(new_long, new_width, new_height) <br />{ <br />long = new_long; <br />largeur = new_width; <br />hauteur = new_height; <br />this.refresh(); <br />} ; <br />//重置长方体的位置 <br />this.move = function(new_left,new_top) { <br />top = new_top; <br />left = new_left; <br />this.refresh(); <br />} ; <br />} <br /><br />function transform() { <br />cuboid.resize(parseInt(document.getElementById("long").value), <br />parseInt(document.getElementById("width"). valeur), <br />parseInt(document.getElementById("height").value)); <br />cuboid.move(parseInt(document.getElementById("left").value), <br />parseInt(document.getElementById("top").value)); <br />cuboid.rotate(parseInt(document.getElementById("rotatex").value), <br />parseInt(document.getElementById("rotatey").value), <br />parseInt(document.getElementById("rotatez" ).valeur)); <br />//cuboid.refresh(); <br />} <br /></script>

gauche :px

haut :< ;/input>px

long :px

width :px

hauteur :px

rotateX : deg

rotateY : deg

rotateZ : deg

<script> <br>var cuboid = new cuboidModel(parseInt(document.getElementById("left").value), <br>parseInt(document.getElementById("top").value), <br>parseInt(document.getElementById(" long").value), <br>parseInt(document.getElementById("width").value), <br>parseInt(document.getElementById("height").value)); <br>cuboid.init(); <br></script>