HTML5 mengubah kiub tiga dimensi mencapai kesan putaran tiga dimensi 360 darjah tanpa hujung mati_html5 kemahiran tutorial

Untuk memahami intipati transformasi dengan lebih baik, kami memutuskan untuk melengkapkan model kiub tiga dimensi, yang boleh mencapai kesan putaran tiga dimensi 360 darjah tanpa jalan buntu.

Namun, sukar untuk menentukan susunan pandangan setiap muka apabila berputar, dan ia masih belum diselesaikan dengan sempurna. Saya harap seseorang dapat menjawabnya!

Kod sumber disumbangkan secara langsung:

Salin kod

Kod tersebut adalah seperti berikut:

.kuboid_side_div{
kedudukan:mutlak;
sempadan: 1px pepejal #333; 🎜>

/**
* Versi ini mempunyai masalah berikut:
* Terdapat masalah dengan pengiraan zIndex putaran tiga dimensi
* Ia juga tidak mempunyai pelbagai model, yang biasa termasuk: garisan, permukaan, kon, sfera, ellipsoid, dsb.
*/
function cuboidModel(left_init,top_init,long_init,width_init,height_init)
{
//////////////////////////////////////
//Mulakan pembolehubah persendirian
/ //////////////////////////////////////
//Awalkan kuboid kedudukan dan saiz
var left = left_init;
var top = top_init; sudut transformasi, lalai ialah 0
var rotateX = 0;
var rotateY = 0
var rotateZ = 0; sisi kuboid
var div_front ;
var div_behind; ///////// ///////////////////////////
//Awalkan kuboid
/// ////////// ///////////////////////////
//Bina enam muka berdasarkan awalan kedudukan.
this.init = function() {
//Buat div hadapan
div_depan = document.createElement("div");
div_front.className = "kuboid_side_div"; = "div depan";
div_front.style.backgroundColor="#f1b2b2";
document.body.appendChild(div_front);//Buat di belakang div
div_behind = document.createElement(" div");
div_behind.className = "cuboid_side_div";
div_behind.innerHTML = "div behind";
div_behind.style.backgroundColor="#bd91eb";
pendumen.badan. div_behind);
//Buat div kiri
div_left = document.createElement("div"); >div_left.style.backgroundColor="#64a3c3";
document.body.appendChild(div_left);//Buat div kanan
div_right = document.createElement("div_right."); .className = "kuboid_side_div";
div_right.innerHTML = "div_kanan"; Cipta div teratas
div_top = document.createElement("div");
div_top.className = "cuboid_side_div"; #e7db78";
document.body.appendChild(div_top);
//Buat div bawah
div_bottom = document.createElement("div");
div_bottom.className = "kuboid_side_div"; 🎜>div_bottom.innerHTML = "div bottom";
div_bottom.style.backgroundColor="#e79c78";
document.body.append(div_bottom(); ;
//Lukis semula
ini.segarkan = function()
{
//Tentukan gaya div_depan
div_front.style.left = kiri "px"
div_front.style . atas = atas "px";
div_front.style.width = panjang "px"; ((-1)*lebar / 2) "px";
//Tentukan gaya div_behind
div_behind.style.left = kiri "px"
div_behind.style.top = atas "px" ;
div_behind.style.width = div_front.style.width;
div_behind.style.height = div_front.style.height;
div_behind.style.webkit TransformOrigin = "50% 50% " *lebar / 2) "px";
//Tentukan gaya div_left
div_left.style.left = kiri ((panjang - tinggi) / 2) "px"; ((tinggi - lebar) / 2) "px";
div_left.style.width = tinggi "px";
div_left.style.height = lebar "px"
div_left.style.webkitTransformOrigin = "50% 50% " ((-1) * panjang /2 ) "px";
//Tentukan gaya div_kanan
div_kanan.style.left = div_left.style.left; atas = div_left.style.top;
div_right.style.width = div_left.style.width;
div_right.style.height =
div_right.style.webkitTransformAri 50% " ((-1) * panjang /2 ) "px";
//Tentukan gaya div_top
div_top.style.left = kiri "px";
div_top.style.top = atas ( (tinggi - lebar)/ 2) "px";
div_top.style.width = panjang "px";
div_top.style.height = lebar "px"; 50% 50% " ((-1) * ketinggian /2 ) "px";
//Tentukan gaya 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; % " ((-1) * ketinggian /2 ) "px";
this.rotate(rotateX,rotateY,rotateZ);
};
//Putar kubus
this.rotate = fungsi(x,y,z) {
putarX = x;
putarY = y;var rotateY_front = rotateY;
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 = (putarX_depan / 90) % 4;
var yI = (putarY_depan / 90) % 4;
var zI = (putarZ_depan / 90) % 4;
var zIndex_matrix = Array baharu();
untuk(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
jika((xI >= 0 && xI < 1) ||(xI >= -4 && xI < -3)) {
} lain jika(( 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;
} lain jika((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;
} lain jika((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;
}
jika((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;
} lain jika((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;
} lain jika((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;
} lain jika((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;
} lain jika((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;
} lain jika((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)) {
}
//赋值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) rotierenX(" rotierenX_front
"deg) rotierenY(" rotierenY_front
"deg) rotierenZ(" rotierenZ_front "deg)";
div_front.style.webkitTransform = transform_rotate_front;
div_front.style.zIndex = zIndex_front;
//behind
var transform_rotate_behind = "perspective(500px) rotierenX(" rotierenX_behind
"deg) rotierenY(" rotierenY_behind
"deg) rotierenZ(" rotierenZ_behind "deg)";
div_behind.style.webkitTransform = transform_rotate_behind;
div_behind.style.zIndex = zIndex_behind;
//left
var transform_rotate_left = "perspective(500px) rotierenX(" rotierenX_links
"deg) rotierenZ(" rotierenZ_links
"deg) rotierenY(" rotierenY_links "deg)";
div_left.style.webkitTransform = transform_rotate_left;
div_left.style.zIndex = zIndex_left; div_right.style.webkitTransform = transform_rotate_right;
div_right.style.zIndex = zIndex_right;
//top
var transform_rotate_top = "perspective(500px) rotierenX(" rotierenX_top
"deg) rotierenZ(" rotierenZ_top
"deg) rotierenY(" rotierenY_top "deg)";
div_top.style.webkitTransform = transform_rotate_top;
div_top.style.zIndex = zIndex_top; //bottom
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;
width = new_width;
height = new_height;
this.refresh();
};
//重置长方体的位置
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" ).Wert));
//cuboid.refresh();
}

links:px

oben:< ;/input>px

long:px

width:px

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