CSS3 Cube

Quick Start

Please check the compatibility notes before using this script.

1. Add either cube.js or cube.min.js script to your page.

   Example: <script src="cube.min.js"></script>

2. Add styles responsible for the cube to you style sheet(s). Exemplary background image can be found here.

   cube.css or cube.scss if you use Sass and Compass.

3. Add cube's markup to your HTML:

4. Add some styles to customise your cube:

5. Initiate the script:

6. And you are ready to go!

Options

Cube Texture

Below you can see an exemplary image used on this page. Feel free to use it as an template for your own cube. You can find a PSD template here.

Note:
The cube texture doesn't have to have the exact size as the image presented here. You can decrease/increase its resolution as long as the image ratio is correct.

Compatibility

Please mind this script uses CSS 3d to render the cube. This means that the script won't work on any IE available thus far. This is because of the lack of support for preserve-3d CSS property.

It's also possible that with some browsers/OS combinations rendering of 3d CSS is not possible, hence it's important to always use a fallback.

The script adds .cube-3d-available class at the top of the document if it can work.

Documentation

If you'd like to take a closer look at the code visit GitHub or check the documentation.