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="http://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:

　　

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