HTML cube plug-in -- jscube v1.7

Jscube is a cube plug-in that is fully implemented using JS and CSS and supports all mainstream browsers. It allows you to create a cube and paste six HTML elements on its surface, supporting rotation and scaling.

Different from other similar special effects, this program can paste any HTML element on the cube, not only limited to images, so neither flash nor canvas can be achieved.

　　

The latest version: 1.7. Update log:

1.0: Basic cube model.

1.1: supports more flexible rotation at any angle.

1.2: scaling is supported.

1.3: enhances the veneer object and fixes some bugs.

1.4: the emergence of css3 is no longer ie only!

1.5: fixed the Firefox bug.

1.6: supports dynamic brightness.

1.7: supports ie9/ie10 GPU acceleration.

Script Reference

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

Create cube

Jscube is easy to create:

var oCube = new Cube();

Then set the plane radius length of the cube:

oCube.setRadius(100);

It is displayed. Now you can see a square instead of a cube, because this is the initial default angle, and this square is the front of it.
The rotate method is used to rotate the image, and several other surfaces are displayed. Then, use the setface method to paste the HTML element on the specified surface.

For details, see the description of the method list.

Object Method

Setlocate (CX, CY)

Locate the cube on the page.
(CX, CY) is the coordinate of the cube center.

Setface (ID, ELEM)
Cube veneer.

ID: Cube area number
ELEM: HTML elements in the page

Setradius (r)

Set the radius length of the cube.
Rotate (anglex, angley, anglez)
Rotate the cube.
Anglex: rotate the angle around the X axis.

Setlight (enable)

Enable/disable dynamic brightness.

Static attributes

Cube.FACE_FRONT = 0

Cube.FACE_RIGHT = 1

Cube.FACE_BACK = 2

Cube.FACE_LEFT = 3

Cube.FACE_TOP = 4

Cube.FACE_BOTTOM = 5

As the name suggests, the IDs of the front and back sides and the upper and lower sides of the cube are numbered.
The first parameter used for setface.

Demo

GoogleCube:

　　

(Supports real 3D effect updates ...)