立方体html与js特效,分享一个HTML立方体插件 JSCube v1.7

JSCube是一个立方体插件，完全用JS和CSS实现，支持所有主流浏览器。通过它可以创建一个立方体，并将6个HTML元素贴在其面上，支持旋转和缩放。

与其他类似特效不同，本程序可以把任意HTML元素贴在立方体上，而不仅仅局限图片，所以无论是flash还是canvas，都是无法做到的。

当前最新版本：1.7。更新日志：

1.0：基本立方体的模型。

1.1：支持任意角度更灵活的旋转。

1.2：支持缩放。

1.3：增强贴面的对象，修复部分bug。

1.4：CSS3的出现，不再是ie only了！

1.5：修正FireFox的bug。

1.6：支持面动态亮度效果。

1.7：支持ie9/ie10的GPU加速。

脚本引用

创建立方体

JSCube创建很简单：var oCube = new Cube();

然后设置立方体的面半径长度：oCube.setRadius(100);

即可显示出来。此时你看到的是一个正方形，而不是立方体，因为这是初始默认的角度，这个正方形就是其正面。

接着通过rotate方法旋转，其他几个面就显示出来了。 然后用setFace方法，将HTML元素贴在指定的面上。

具体看方法列表说明。

对象方法

setLocate(cx, cy)

页面中定位立方体。

(cx, cy)为立方体中心点坐标

setFace(id, elem)

立方体贴面。

id: 立方体面编号

elem: 页面中的HTML元素

setRadius(r)

设置立方体面的半径长度。

rotate(angleX, angleY, angleZ)

旋转立方体。

angleX: 绕X轴旋转相应角度，下同。

setLight(enable)

开启/关闭动态光亮效果。

静态属性Cube.FACE_FRONT = 0Cube.FACE_RIGHT = 1Cube.FACE_BACK = 2Cube.FACE_LEFT = 3Cube.FACE_TOP = 4Cube.FACE_BOTTOM = 5顾名思义，立方体前后左右上下面的ID编号。

用于setFace的第一个参数。