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 http://tjvantoll.com/2012/02/27/Making-a-3D-Picture-Cube-with-CSS3/. All browsers that support CSS 3D transforms are supported.
Include the CSS and JS files.
<link rel="stylesheet" href="/PictureCube.css" />
<script src="/PictureCube.js"></script>
Call the constructor anytime after the appropriate DOM node that will contain the cube has been created.
- node
String
: The DOM node or theid
of the DOM node to turn into the PictureCube. - images
Array
: An array ofObject
s. EachObject
should havesrc
andid
attributes which will applied to the<img />
tags created. - options
Object
: An optional set of options to configure the cube. Right now only anonchange
event is available.
Example:
<div id="cube"></div>
<script>
var cube = new PictureCube('cube',
[
{ src: '1.jpg', title: 'Picture 1' },
{ src: '2.jpg', title: 'Picture 2' },
{ src: '3.jpg', title: 'Picture 3' },
{ src: '4.jpg', title: 'Picture 4' },
{ src: '5.jpg', title: 'Picture 5' },
{ src: '6.jpg', title: 'Picture 6' }
],
{
onchange: function(number, image, cube) {
console.log('Side # ' + number + ' is now showing');
}
}
);
</script>
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).
*/
cube.goto(2);
cycle - Create an interval to cycle through the sides of the cube.
/**
* @param interval {number} The number of milliseconds between each image transition
*/
cube.cycle(2000);
clearCycle - Clear the interval created by cycle.
cube.clearCycle();
If you pass an onchange
function
to the constructor it will be invoked everytime the side of the cube displaying changes. The function
will be passed the following parameters.
- number
Number
: The side number displaying (1 - 6). - image
DOMNode
: The<img />
tag currently displaying. - cube
PictureCube
: A reference to thePictureCube
instance.
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
//function.
};
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.