HTML5 transform三维立方体实现360无死角三维旋转效果

为了更好得掌握transform的精髓，所以决定完成三维立方体的模型，可以实现360无死角的三维旋转效果。

但是旋转时判断每个面的视图顺序比较困难，仍未完美解决，希望有人能解答！

源码直接贡献啦：

复制代码 代码如下:

<style>

.cuboid_side_div{

position:absolute;

border:1px solid #333;

-webkit-transition:ea all 1s;

}

</style>

<script>

/**

* 本版本存在以下问题：

* 三维旋转的zindex计算有问题

* 还欠缺多种模型，常见的包括：线、面、椎体、球体、椭球体等。

*/

function cuboidmodel(left_init,top_init,long_init,width_init,height_init)

{

////////////////////////////////////////

//初始化私有变量

///////////////////////////////////////

//初始化长方体位置、大小

var left = left_init;

var top = top_init;

var long = long_init;

var width = width_init;

var height = height_init;

//初始化变换角度，默认为0

var rotatex = 0;

var rotatey = 0;

var rotatez = 0;

var zindex = 0;

//定义长方体六个面的div对象

var div_front;

var div_behind;

var div_left;

var div_right;

var div_top;

var div_bottom;

////////////////////////////////////////

//初始化长方体

///////////////////////////////////////

//根据初始位置构造六个面。

this.init = function() {

//创建front div

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);

//创建behind div

div_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);

//创建left div

div_left = document.createelement(“div”);

div_left.classname = “cuboid_side_div”;

div_left.innerhtml = “div left”;

div_left.style.backg宋代roundcolor=”#64a3c3″;

document.body.appendchild(div_left);

//创建right div

div_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);

//创建top div

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);

//创建bottom div

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);

this.refresh();

};

//重绘

this.refresh = function()

{

//定义div_front样式

div_front.style.left = left+”px”;

div_front.style.top = top+”px”;

div_最懂我的那个人作文600字front.style.width = long +”px”;

div_front.style.height = height +”px”;

div_front.style.webkittransformorigin = “50% 50% “+((-1)*width / 2)+”px”;

//定义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”;

//定义div_left样式

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% 50% “+((-1) * long /2 )+”px”;

//定义div_right样式

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% 50% “+((-1) * long /2 )+”px”;

//定义div_top样式

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% 50% “+((-1) * height /2 )+”px”;

//定义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);

};

//旋转立方体

this.rotate = function(x,y,z) {

rotatex = x;

rotatey = y;

rotatez = z;

var rotatex_front = rotatex;

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 = (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)) {

} el 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;

} el 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;

} el 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;

} el 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;

zindex_matrix_behind = zindex_matrix_tmp;

} el 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;

} el 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;

} el 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;

} el 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;

} el 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) 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;

//behind

var transform_rotate_behind = “perspective(500px) rotatex(“+rotatex_behind+

“deg) rotatey(“+rotatey_behind+

“deg) rotatez(“+rotatez_behind+”deg)”;

div_behind.style.webkittransform = transform_rotate_behind;

div_behind.style.zindex = zindex_behind;

//left

var transform_rotate_left = “perspective(500px) rotatex(“+rotatex_left+

“deg) rotatez(“+rotatez_left+

“deg) rotatey(“+rotatey_left+”deg)”;

div_left.style.webkittransform = transform_rotate_left;

div_left.style.zindex = zindex_left;

//right

var transform_rotate_right = “perspective(500px) rotatex(“+rotatex_right+

“deg) rotatez(“+rotatez_right+

“deg) rotatey(“+rotatey_right+”deg)”;

div_right.style.webkittransform = transform_rotate_right;

div_right.style.zindex = zindex_right;

//top

var transform_rotate_top = “perspective(500px) rotatex(“+rotatex_top+

“deg) rotatez(“+rotatez_top+

“deg) rotatey(“+rotatey_top+”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_bottom+”deg)”;

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

};

}

functio韩国vov官网n transform() {

cuboid.resize(parint(document.getelementbyid(“long”).value),

parint(document.getelementbyid(“width”).value),

parint(document.getelementbyid(“height”).value));

cuboid.move(parint(document.getelementbyid(“left”).value),

parint(document.getelementbyid(“top”).value));

cuboid.rotate(parint(document.getelementbyid(“rotatex”).value),

parint(document.getelementbyid(“rotatey”).value),

parint(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

top:<input id=”top” value=”50″></input>px

long:<input id=”long” value=”100″></input>px

width:<input id=”width” value=”60″></input>px

height:<input id=”height” value=”80″></input>px

rotatex: <input id=”rotatex” value=”0″></input>deg

rotatey: <input id=”rotatey” value=”0″></input>deg

rotatez: <input id=”rotatez” value=”0″></input>deg

<input type=”button” value=”确定” onclick=”transform()”></input>

<label id=”status”></label>

</div>

<script>

var cuboid = new cuboidmodel(parint(document.getelementbyid(“left”).value),

parint(document.getelementbyid(“top”).value),

parint(doc炊烟袅袅的意思ument.getelementbyid(“long”).value),

parint(document.getelementbyid(“width”).value),

parint(document.getelementbyid(“height”).value));

cuboid.init();

</script>