3D Rotating Cube In jQuery - Cubelet.js

Cubelet.js is a jQuery plugin to create a 3D cube that is rotatable and scalable using CSS3 rotateX, rotateY, rotateZ, and scale properties.

How to use it:

1. Load the Cubelet.js plugin after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.cubelet.js"></script>

2. Create a container in which you wish to place the 3D rotating cube.

<div class="example-cubelet"></div>

3. Initialize the 3D rotating cube.

var $cubelet = $('.example-cubelet');
$cubelet.cubeletInit();

4. Get the current rotation coordinates of the cube.

$.fn.cubeletGetCoords();
// returned object:
{ x: number, y: number, z: number, scale: number }

5. Set the rotation coordinates of the Cubelet. Sets the internal state of the widget as well as the inline CSS rotate styles. The coordinates parameter accepts any object with the following format:

$.fn.cubeletSetCoords({ 
  x: number=, y: number=, z: number=, scale: number=
})

6. Show & hide the Cubelet.

// show
$.fn.cubeletShow();

// hide
$.fn.cubeletHide();

// check if is shown
$.fn.cubeletIsShown();

7. Takes the Cubelet's current rotation coordinates and apply them to another jQuery collection. Note that this will overwrite any inline transform styles currently set on these elements.

$.fn.cubeletApplyRotationToElement(el);

---

This awesome jQuery plugin is developed by jeremyckahn. For more Advanced Usages, please check the demo page or visit the official website.