为了得到更好的把握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. 图解：Activity生命周期

    当用户需要对手机通过屏幕进行交互时,比如打一个电话,拍张照片,发送一个邮件,或者查看地图.开发者就需要实现一个活动(Activity).每个活动都将作为一个提供用户使用接口的窗口.它可以填满整个屏幕, ...

  2. html中返回上一页

    <a href="<a href="javascript :history.back(-1)">返回上一页</a>或<a href=& ...

  3. HDU 3177 Crixalis&#39;s Equipment（贪婪）

    主题链接:http://acm.hdu.edu.cn/showproblem.php? pid=3177 Problem Description Crixalis - Sand King used t ...

  4. POJ培训计划2253_Frogger(最短/floyd)

    解决报告 意甲冠军: 乞讨0至1所有最大的道路值的最小数量. 思维: floyd. #include <iostream> #include <cstdio> #include ...

  5. 【原创】shadowebdict开发日记：基于linux的简明英汉字典（三）

    全系列目录: [原创]shadowebdict开发日记:基于linux的简明英汉字典(一) [原创]shadowebdict开发日记:基于linux的简明英汉字典(二) [原创]shadowebdic ...

  6. 设单链表中存放n个字符，试设计一个算法，使用栈推断该字符串是否中心对称

    转载请注明出处:http://blog.csdn.net/u012860063 问题:设单链表中存放n个字符.试设计一个算法,使用栈推断该字符串是否中心对称,如xyzzyx即为中心对称字符串. 代码例 ...

  7. POJ 1915-Knight Moves (单向BFS &amp;&amp; 双向BFS 比)

    主题链接:Knight Moves 题意:8个方向的 马跳式走法 ,已知起点 和终点,求最短路 研究了一下双向BFS,不是非常难,和普通的BFS一样.双向BFS只是是从 起点和终点同一时候開始搜索,可 ...

  8. Codeforces Helpful Maths

    Xenia the beginner mathematician is a third year student at elementary school. She is now learning t ...

  9. JSON小结

    在 JSON 中,“Object” 是什么呢? json.org 有很好的解释: 1 .An object is an unordered set of name/value pairs. 2.An ...

  10. Cocos2d-x-Lua 开发一个简单的游戏（记数字步进白色块状）

    Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状) 本篇博客来给大家介绍怎样使用Lua这门语言来开发一个简单的小游戏-记数字踩白块. 游戏的流程是这种:在界面上生成5个数1~5字并显 ...