一个很不错的JS3D效果。收藏一下

 JSCube可以创建一个立方体，将6个HTML元素贴在其面上，并支持旋转和缩放。

当前最新版本1.6.0。支持IE,FireFox,Opear,Chrome,Safari浏览器。

脚本引用地址：http://www.etherdream.com/FunnyScript/WitCube/Cube.js


Cube.js导出一个类：Cube。

共4个方法:
setLocate(cx, cy)
  页面中定位立方体。
  (cx, cy)为立方体中心点坐标

setFace(id, elem)
  立方体贴面。
  id: 立方体面编号
  elem: 页面中的HTML元素

setRadius(r)
  设置立方体中心点到顶点的距离。

rotate(angleX, angleY, angleZ)
  旋转立方体。
  angleX: 绕X轴旋转1角度
  ...

6个静态属性:
Cube.FACE_FRONT = 0
Cube.FACE_RIGHT = 1
Cube.FACE_BACK = 2
Cube.FACE_LEFT = 3
Cube.FACE_TOP = 4
Cube.FACE_BOTTOM = 5
  顾名思义，立方体前后左右上下面的ID编号。
  用于setFace的第一个参数。


一个简单的Demo: http://www.etherdream.com/FunnyScript/WitCube/GCube.html

发挥你想象，可以做出很多有趣的东西。

原贴地址： http://topic.csdn.net/u/20110112/21/252dab4e-eace-494c-8129-cf81a3db271c.html?35253

源码如下：

/**************************************** * HTML立方体插件 v1.6.0 * By EtherDream (c) 2006-2010 * 最后更新: 2010.12.25 **/ var Cube; (function(){ /******************* * |+y * | * 0----- +x * / * /+z ******************/ function Point(x, y, z) { var _x = x; var _y = y; var _z = z; this.update = function() { this.rx = _x; this.ry = _y; this.deepth = _z; //无限远 }; this.rotate = function(radX, radY, radZ) { var x,y,z; var sin, cos; if(radX) { sin = Math.sin(radX); cos = Math.cos(radX); y = cos * _y - sin * _z; z = cos * _z + sin * _y; _y = y; _z = z; } if(radY) { sin = Math.sin(radY); cos = Math.cos(radY); x = cos * _x - sin * _z; z = cos * _z + sin * _x; _x = x; _z = z; } if(radZ) { sin = Math.sin(radZ); cos = Math.cos(radZ); x = cos * _x - sin * _y; y = cos * _y + sin * _x; _x = x; _y = y; } this.update(); }; this.update(); } /***************************** * p1--------p2 * | | * p3--------p4 *****************************/ function Face(p1, p2, p3, p4) { var P1 = p1; var P2 = p2; var P3 = p3; var P4 = p4; /*************************************************** * P(x,y) + [a,b,c,d,tx,ty] * => P(ax+by+tx, cx+dy+ty) ***************************************************/ this.getMatrix = function() { var tx = P1.rx; var ty = P1.ry; var a = (P2.rx - tx) / 2; var b = (ty - P2.ry) / 2; var c = (P3.rx - tx) / 2; var d = (ty - P3.ry) / 2; return [a, b, c, d, tx, ty]; }; this.getDeepth = function() { return P1.deepth + P4.deepth; }; this.getBlockX = function() { return Math.min(P1.rx, P2.rx, P3.rx, P4.rx); }; this.getBlockY = function() { return Math.max(P1.ry, P2.ry, P3.ry, P4.ry); }; } Cube = function() { /******************* * 4-------5 * /| /| * 0-------1 | * | | | | * | 7- - -|-6 * |/ |/ * 3-------2 *******************/ var R = 35; var P = [ new Point(-1, +1, +1), new Point(+1, +1, +1), new Point(+1, -1, +1), new Point(-1, -1, +1), new Point(-1, +1, -1), new Point(+1, +1, -1), new Point(+1, -1, -1), new Point(-1, -1, -1) ]; var F = [ new Face(P[0], P[1], P[3], P[2]), //前 new Face(P[1], P[5], P[2], P[6]), //右 new Face(P[5], P[4], P[6], P[7]), //后 new Face(P[4], P[0], P[7], P[3]), //左 new Face(P[4], P[5], P[0], P[1]), //上 new Face(P[3], P[2], P[7], P[6]) //下 ]; var _cx, _cy; var arrSty = []; var arrFlt = []; var keyName; var ver = navigator.userAgent; var isIE = /MSIE/.test(ver); var isFF = /Firefox/.test(ver); var RAD = Math.PI / 180; function apply(id, visible) { var sty = arrSty[id]; if(!sty) return; if(visible) sty.display = "block"; else { sty.display = "none"; return; } var face = F[id]; var m = face.getMatrix(R); //0.123456 for(var i=0; i<6; i++) m[i] = ((m[i] * 1e6) >> 0) / 1e6; if(isIE) { //IE Matrix滤镜 var objFlt = arrFlt[id]; objFlt.M11 = m[0]; objFlt.M21 = m[1]; objFlt.M12 = m[2]; objFlt.M22 = m[3]; //objFlt.Dx = m[4]; //设置了没有效果 //objFlt.Dy = m[5]; sty.pixelLeft = _cx + R * face.getBlockX(); sty.pixelTop = _cy - R * face.getBlockY(); } else { //CSS3 m[4] = _cx + R * m[4]; m[5] = _cy - R * m[5]; if(isFF) { m[4] += "px"; m[5] += "px"; } sty[keyName] = "matrix(" + m.join(",") + ")"; } } function draw() { var deepth = []; var i; /* * 深度排序 */ for(i=0; i<6; i++) deepth[i] = {id:i, val:F[i].getDeepth()}; deepth.sort(function(a,b){return (a.val>b.val)?-1:1}); /* * 0-2: visible * 3-5: hidden */ for(i=0; i<6; i++) apply(deepth[i].id, i<3); } function updateSize(sty) { var D = R+R; if(!isIE) //解决边框分离 D-=2; sty.width = Math.round(D) + "px"; sty.height = Math.round(D) + "px"; } /** * setLocate: * 页面中定位立方体。 * (cx, cy)为立方体中心点坐标 */ this.setLocate = function(cx, cy) { _cx = cx; _cy = cy; draw(); }; /** * setFace: * 立方体贴面。 * id: 立方体面编号 * elem: 页面中的HTML元素 */ this.setFace = function(id, elem) { if(arrSty[id]) arrSty[id].display = "none"; var sty = elem.style; arrSty[id] = sty; sty.position = "absolute"; sty.left = "0"; sty.top = "0"; sty.margin = "0"; sty.border = "#000 1px solid"; if(isIE) { //IE Filter var s = "DXImageTransform.Microsoft.Matrix"; sty.filter = "progid:" + s + "(sizingMethod='auto expand')"; arrFlt[id] = elem.filters[s]; } else { //CSS3 transform if(!keyName) { if(sty.MozTransform != null) //FireFox keyName = "MozTransform"; else if(sty.WebkitTransform != null) //Chrome,Safari keyName = "WebkitTransform"; else if(sty.OTransform != null) //Opera keyName = "OTransform"; else throw new Error("浏览器不支持"); } //调整参照点 sty[keyName + "Origin"] = "0% 0%"; } updateSize(sty); draw(); }; /** * setRadius: * 设置立方体中心点到顶点的距离。 */ this.setRadius = function(r) { R = r; for(var i=0,sty; i<8; i++) if(sty = arrSty[i]) updateSize(sty); draw(); }; /** * rotate: * 旋转立方体。 * angleX: 绕X轴旋转1角度 * ... */ this.rotate = function(angleX, angleY, angleZ) { for(var i=0; i<8; i++) P[i].rotate(RAD*angleX, RAD*angleY, RAD*angleZ); draw(); }; }; Cube.FACE_FRONT = 0; Cube.FACE_RIGHT = 1; Cube.FACE_BACK = 2; Cube.FACE_LEFT = 3; Cube.FACE_TOP = 4; Cube.FACE_BOTTOM = 5; })() //End Module