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加速。

脚本引用

<script src="https://files.cnblogs.com/index-html/Cube.js"></script>

创建立方体

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 = 0

Cube.FACE_RIGHT = 1

Cube.FACE_BACK = 2

Cube.FACE_LEFT = 3

Cube.FACE_TOP = 4

Cube.FACE_BOTTOM = 5

顾名思义，立方体前后左右上下面的ID编号。 
用于setFace的第一个参数。

 

DEMO

GoogleCube: https://www.etherdream.com/creative/GoogleCube.html

　　

　　（支持真正的3D效果更新中...）