Le cube tridimensionnel de transformation HTML5 permet d'obtenir un effet de rotation tridimensionnelle à 360 degrés sans impasses_html5 compétences du didacticiel

Afin de mieux saisir l'essence de la transformation, nous avons décidé de réaliser un modèle de cube tridimensionnel, capable d'obtenir un effet de rotation tridimensionnelle à 360 degrés sans impasses.

Cependant, il est difficile de déterminer l'ordre d'affichage de chaque visage lors de la rotation, et ce n'est pas encore parfaitement résolu. J'espère que quelqu'un pourra y répondre !

Le code source est contribué directement :

Copiez le code Le code est le suivant : .cuboid_side_div{ position:absolute; border:1px solid #333 -webkit-transition:ease all 1s } /** * Cette version présente les problèmes suivants : * Il y a un problème avec le calcul zIndex de la rotation tridimensionnelle * Il lui manque également une variété de modèles, les plus courants incluent : des lignes, des surfaces, des cônes, sphères, ellipsoïdes, etc. */ fonction cuboidModel(left_init,top_init,long_init,width_init,height_init) { // ////////////////////////////////////// //Initialiser les variables privées / ////////////////////////////////////// //Initialiser le cuboïde position et taille var left = left_init; var top = top_init; var long = long_init; var width = width_init; angle de transformation, la valeur par défaut est 0 var rotateX = 0; var rotateY = 0; var rotateZ = 0; var zIndex = 0 //Div objet qui définit les six; côtés du cuboïde var div_front var div_behind; var div_left var div_top; ///////// /////////////////////////// //Initialiser le cuboïde /// ////////// /////////////////////////// //Construire six faces basées sur l'initiale position. this.init = function() { //Créer un div avant 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); //Créer derrière div div_behind = document.createElement(" div"); div_behind.className = "cuboid_side_div"; div_behind.innerHTML = "div derrière"; div_behind.style.backgroundColor="#bd91eb"; document.body.appendChild( div_behind); //Créer un div gauche 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); //Créer un div droit div_right = document.createElement("div"); .className = "cuboid_side_div"; div_right.innerHTML = "div right"; div_right.style.backgroundColor="#78e797"; document.body.appendChild (div_right); Créer un div supérieur 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); //Créer un div inférieur 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); ; //Redraw this.refresh = function() { //Définir le style div_front div_front.style.left = left "px"; div_front.style . top = top "px" div_front.style.width = long "px"; div_front.style.height = hauteur "px" div_front.style.webkitTransformOrigin = "50% 50%"; ((-1)*width / 2) "px"; //Définir le style div_behind 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"; //Définir le style div_left div_left.style.left = left ((long - height) / 2) "px" div_left.style.top = top ((hauteur - largeur) / 2) "px"; div_left.style.width = hauteur "px" div_left.style.height = width "px"; "50% 50% " ((-1) * long /2 ) "px"; //Définir le style div_right div_right.style.left = div_left.style.left; 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"; //Définir le style div_top div_top.style.left = left "px"; div_top.style.top = top ( (hauteur - largeur)/ 2) "px"; div_top.style.width = long "px" div_top.style.height = width "px"; 50% 50% " ((-1) * height /2 ) "px"; //Définir le style div_bottom 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); }; //Faire pivoter le cube this.rotate = function(x,y,z) { rotateX = x; rotateY = y; rotateZ = z;var rotationY_front = rotationY; var rotateZ_front = rotateZ; //判断各个面旋转角度 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); //判断各个面的z轴显示顺序 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 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 = -4 && xI } else if(( xI >= 1 && xI = -3 && xI 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 = -2 && xI 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 = -1 && xI 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 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 -3 && yI 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 -2 && yI 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 -1 && yI }

if((zI > 0 && zI -4 && zI 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 -3 && zI 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 -2 && zI 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 -1 && zI } //賦值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); //前面 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; //後面 var transform_rotate_behind = "perspective(500px)rotateX("rotateX_behind "deg)rotateY("rotateY_behind "deg)rotateZ("rotateZbem"; div_behind.style.webkitTransform = transform_rotate_behind; div_behind.style.zIndex = zIndex_behind; //左 var transform_rotate_left = "perspective(500px)rotateX("rotateX_left "deg)rotateZ("rotateZ_left "deg)rotateY("rotateY_leftateZ_left div_left.style.webkitTransform=transform_rotate_left; div_left.style.zIndex = zIndex_left; //右 var transform_rotate_right = "perspective(500px)rotateX("rotateX_right "deg)rotateZ("rotateZ_right "deg)rotateY("rotateY_right"degate"; div_right.style.webkitTransform=transform_rotate_right; div_right.style.zIndex = zIndex_right; //上 var transform_rotate_top = "perspective(500px)rotateX("rotateX_top "deg)rotateZ("rotateZ_top "deg)rotateY("rotateYtop"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_boto("rotate"; div_bottom.style.webkitTransform=transform_rotate_bottom; div_bottom.style.zIndex = zIndex_bottom; }; //重置長方體的長、寬、高 this.resize = function(new_long, new_width, new_height) { long = new_long; 寬度=新寬度； 高度=new_height; this.refresh(); }; //重置長方體的位置 this.move = function(new_left,new_top) { top = new_top; 左=新左； this.refresh(); }； }

函數transform() { cuboid.resize(parseInt(document.getElementById("long").value), parseInt(document.getElementById( ) "寬度"). 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" ) ) )。 ;左:100px;寬:1000px;高:360px;"> 左：輸入>px

頂部：px

長:px

寬度:px

高度： px

rotateX : deg

rotateY: deg

rotateZ: deg

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(); 腳本>