CSS3 Cube – Our first open source plugin

cube.js is a light script which allows you to add a fancy rotating CSS3 cube to your page.

You will find all the important information, including a quick start guide, usage examples, a sample PSD with the cube texture and detailed documentation at the plugin dedicated site – http://xfiveco.github.io/cube/

For a quick overview, check the Quick Start Guide below.

Technical Information

We have decided to use CSS 3D to render the cube, which means that the script won’t work on any IE available thus far because of their lack of support for the preserve-3d CSS property. We considered usage of THREE.js at the beginning, but as it turned out, while THREE.js would allow IE 9+ level support, the files size would be much bigger – minified JS and CSS files in our plugin have a combined size of 10kB, while three.min.js itself has 418kB!

CSS3 Cube is a lightweight 10kB plugin

It’s important to note here that the script offers a fallback method, so you can set a fallback image (or any other solution) if the animated cube is not available. (The script adds .cube-3d-available class at the top of the document if it can work).

You may also wonder why we haven’t simply used CSS to spin the cube. The answer is that while it’s easy to deploy the animation itself, it’s harder to control it using plain CSS. It applies especially to focusOn method used in conjunction with rotate.

Quick Start Guide

Using the script is very easy. It’s written in a plain JavaScript, so jQuery is not required. Please remember that the script won’t work in all browsers, so it’s important to prepare a fallback using .cube-3d-available class appended at the top of the page.