Skip to content
A picture cube with 3D transitions allowed through a JavaScript API
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Create a 3D interactive cube with an image on all 6 sides. For a full explanation of the creation of this file and a full demo of all of the functionality see All browsers that support CSS 3D transforms are supported. Browsers that do not support the transforms will simply see a box with the first image passed in.


Include the CSS and JS files.

<link rel="stylesheet" href="/PictureCube.css" />
<script src="/PictureCube.js"></script>

Call the constructor anytime after the 'DOMContentLoaded' event has fired.

 * @param node {DOMNode|string} The node to turn into the cube or the id attribute of the node
 * @param images {Array} An Array of 6 Strings containing the URLs of the images to place in the cube
addEventListener('DOMContentLoaded', function() {
    var cube = new PictureCube('nodeToBecomeTheCube', [

Since PictureCube depends on CSS 3D transforms, you can use Modernizr to detect support...

if (Modernizr.csstransforms3d) {
    new PictureCube('', []);

but there's really no harm in calling PictureCube blindly. Browsers that don't support 3D transforms will just get a box with the first image in the array passed in.


goto - Go to a particular side of the cube using a 3D transformation.

 * @param side {number} The number of the side to change the cube to (1 - 6).

cycle - Create an interval to cycle through the sides of the cube.

 * @param interval {number} The number of milliseconds between each image transition

clearCycle - Clear the interval created by cycle.



The following technique can be used to extend PictureCube. This example creates an AwesomeCube that inherits the base methods from PictureCube's prototype.

AwesomeCube = function(node, images) {
    PictureCube.apply(this, [node, images]);
AwesomeCube.prototype = new PictureCube();
AwesomeCube.prototype.newMethod = function() {
    //this.cube, this.images, this.goto, this.cycle
    //and this.clearCycle are available to the new


Currently the cube will be 100px x 100px and will resize the images provided to be the same size. Look for the size to be configurable in a future update.

Something went wrong with that request. Please try again.