为了得到更好的把握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. linux网络编程学习笔记之三 -----多进程并发服务端

    首先是fork()函数.移步APUE 8.3.  比較清晰的解释能够參考http://blog.csdn.net/lingdxuyan/article/details/4993883和http://w ...

  2. Git经常使用命令以及使用方法

    一 怎样让单个文件回退到指定的版本号 1.   进入到文件所在文件文件夹,或者能找到文件的路径 查看文件的改动记录 git log  MainActivity.java 2.   回退到指定的版本号 ...

  3. [置顶] quartznet任务调度和消息调度（JAVA与C#版对比）

    quartznet任务调度和消息调度 1.  作用 自动执行任务. 2.  下载地址 NET版本 JAVA版本 1下载 http://quartznet.sourceforge.net/downloa ...

  4. 【cocos2d-x制作别踩白块儿】第一期：游戏介绍

    这一系类文章.我们将来分析时下最火的一款游戏 -- 别踩白块儿. 无图无真相,先上图 这就是我们终于要完毕项目的效果图. 游戏刚開始的最以下有一栏为黄色,紧接着上面每一行都是有一个黑色块,其余为白色块 ...

  5. Java中的反射——（1）什么是反射

    Java程序中的各个Java类属于同一类事物,描写叙述这类事物的Java类名就是Class. public class ReflectTest { public static void main(St ...

  6. swift 进阶笔记 (一) —— 可选型

    swift定义可选型的时候,要用"?",可是在swift的标准库中,可选型的定义是Optional<T>,"? "仅仅是个简写形式. var myN ...

  7. Effective C++ Item 33 避免遮掩继承过来的名称

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie ? 不懂 c++为什么derived classes 内的名称要遮掩 base classe ...

  8. jQuery中间each实施例的方法

    $.each()和$(selector).each()很阶段似,但它是不一样的. 前者可用于遍历数组或json对象 后者被设计成遍历jQuery对象 第一个是$.each()对,通常这么用 $.eac ...

  9. swift学习笔记(六)析关闭过程和使用分配给属性的默认值

    一.通过关闭和功能的默认实现财产值 当存储属性默认值需要定制,能为客户提供通过关闭或全局函数的自定义默认值. 注意:全局函数的结构,和枚举使用keywordstatic大喊    用classkeyw ...

  10. 基于Office 365 无代码工作流分析-需求基本分析！

     客户需求分析: 嘉昊信息是一家IT创业型公司,因为公司初创,有较多的招聘员工的需求,公司近期购买了Office 365,因为招聘工作繁琐,HR人员须要做非常多反复繁琐工作,HR主管提议开发一个招 ...