为了得到更好的把握transform精华。因此，我们决定完成三维立方体模型，可以实现360无死三维旋转作用。

但旋转更难推断每侧视图的序列。然而，完美的解决方案，我希望有人能回答。

源代码直接贡献的朋友：

<style>

.cuboid_side_div{

	position:absolute;

	border:1px solid #333;

	-webkit-transition:ease 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.backgroundColor="#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_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)) {

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

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

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

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

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

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

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

	};

}

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").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<br>

	top:<input id="top" value="50"></input>px<br>

	long:<input id="long" value="100"></input>px<br>

	width:<input id="width" value="60"></input>px<br>

	height:<input id="height" value="80"></input>px<br>

	rotateX: <input id="rotatex" value="0"></input>deg<br>

	rotateY: <input id="rotatey" value="0"></input>deg<br>

	rotateZ: <input id="rotatez" value="0"></input>deg<br>

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

	<label id="status"></label>

</div>

<script>

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

</script>

版权声明：本文博主原创文章，博客，未经同意不得转载。

HTML5 transform三维立方体（随着旋转的效果）的更多相关文章

  1. HTML5 纯CSS3实现正方体旋转3D效果

    实现效果: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  2. 拒绝IE8-,CSS3 transform rotate旋转动画效果（支持IE9+/chrome/firefox）

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  3. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  4. html5网页动画总结--jQuery旋转插件jqueryrotate

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  5. 创意HTML5文字特效 类似翻页的效果

    原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...

  6. jQuery+css3实现极具创意的罗盘旋转时钟效果源码

    效果 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  7. css做旋转相册效果

    css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  8. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  9. HTML5 Canvas 实现的9个 Loading 效果

    Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...

随机推荐

  1. Unity3D中的Update, FixedUpdate, LateUpdate的区别

    MonoBehaviour.Update 更新 当MonoBehaviour启用时,其Update在每一帧被调用. MonoBehaviour.FixedUpdate 固定更新 当MonoBehavi ...

  2. 黄聪：Microsoft Enterprise Library 5.0 系列教程(六) Security Application Block

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(六) Security Application Block 开发人员经常编写需要安全功能的应用程序.这些应用程序 ...

  3. Codeforces Round #198 (Div. 2) C. Tourist Problem （数学+dp）

    C. Tourist Problem time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  4. NYOJ202 红黑树 【预购】

    红黑树 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描写叙述 什么是红黑树呢?顾名思义,跟枣树类似.红黑树是一种叶子是黑色果子是红色的树. .. 当然,这个是我说的. .. ...

  5. Linux 软连接与硬连接

    Linux 软连接与硬连接 对于一个文件来说,有唯一的索引接点与之相应,而对于一个索引接点号,却能够有多个文件名称与之相应.因此,在磁盘上的同一个文件能够通过不同的路径去訪问该文件.注意在Linux下 ...

  6. MessageBox()功能

    MessageBox()功能.这是一个非常频繁使用的Win32 API,在屏幕上显示一个窗体,提出问题,并等待用户输入.它的原型是 int MessageBox(HWND hwnd,LPCTSTR l ...

  7. C#读书

    C#读书雷达   大家都知道,ThoughtWorks的技术雷达每年都会发布两到三次,它不但是业界技术趋势的标杆,更提供了一种卓有成效的方法论,即打造自己的技术雷达.在这种思想的驱动下,我们诞生了自己 ...

  8. ASP.NET Core 1.0 部署 HTTPS

    ASP.NET Core 1.0 部署 HTTPS ASP.NET Core 1.0 部署 HTTPS (.NET Framework 4.5.1) 提示 更新时间:2016年01月23日. 在目前介 ...

  9. Fire Net HDU

    Fire Net Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Subm ...

  10. Highcharts中文教程

    http://www.hcharts.cn/docs/index.php?doc=start