为了得到更好的把握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. SQL SERVER IN参数化处理

    方法一. CREATE TABLE [dbo].[Users] ( Id INTEGER IDENTITY(1, 1) PRIMARY KEY , Name NVARCHAR(50) NOT NULL ...

  2. VS2010关于error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    前段时间自己的系统一直在安装更新.今天突然打开VS2010当运行的时候一直出现error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏这种错误.然后就百度 解决的方法: 1.项目\属 ...

  3. Nim博弈游戏

    给定n堆石子,每次每人能从一堆石子中取若干个石子(不能不取),最后不能取石子者败 对于这个游戏,我们要判断的是,给定局势下,先手者胜还是败 设先手胜的局势为N-postion,先手败的局势为P-pos ...

  4. Zabbix的数据表结构

    看到Zabbix的数据表结构吧,就知道数据量大了 性能问题很让人担忧,不过基于Zabbix数据库导出报表,或自动跑报表的时候,就必须去了解一下zabbix的数据表结构了,得知道XX放在哪才能找到XX, ...

  5. UseCase事件描述叙事流规范

    文化/fasiondog 整理的用例需求编写规范.分享部分UseCase事件描述叙事流规范.其中.标准5~10.12来自哪里<编写有效用例>([美国] Alistair Cockburn ...

  6. 看PHP在内部迭代的动作

    以下我们来了解怎样实现一个自己定义的迭代器,然后再開始慢慢理解迭代器的内部工作原理.先来看一个官方的样例: <? php class myIterator implements Iterator ...

  7. Android 动画具体解释View动画

    为了让用户更舒适的在某些情况下,利用动画是那么非常有必要的.Android在3.0一旦支持两种动画Tween动漫Frame动画.Tween动画支持简单的平移,缩放,旋转,渐变.Frame动画就像Gif ...

  8. Windows 7下一个：该应用程序不能正常启动(0xc0150002)

             在新系统中正确安装QQ2010无法执行,同一时候安装的TM2009也无法执行. 相同显示为"应用程序无法正常启动(0xc0150002). 请单击"确定" ...

  9. UBUNTU12.04下安装配置体验gnome3

    年. ubuntu12.04默认采用unity界面,但是自己更加喜欢gnome3的操作方式. 安装gnome3: sudo apt-get install  gnome-shell 其实安装成功后,注 ...

  10. 特征选择（三）-K-L变换

    上一讲说到,各个特征(各个分量)对分类来说,其重要性当然是不同的. 舍去不重要的分量,这就是降维. 聚类变换觉得:重要的分量就是能让变换后类内距离小的分量. 类内距离小,意味着抱团抱得紧. 可是,抱团 ...