Arrow Down Arrow Left Arrow Right Arrow Down Arrow Left Arrow Right Arrow Arrow Down Arrow Left Arrow Right Articles Case Study Close CV Facebook GitHub Google+ Menu Information Link LinkedIn x five Interview Location Code Snippet Twitter Tick

CSS3 Cube – Our first open source plugin

by Artur Kot on February 20, 2014
Published in Open Source Add Comment

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.

Step 1

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

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

Step 2

Attach cube.css to your page, or copy styles from it to your stylesheet.

cube.scss is available if you use Sass and Compass and want to customize the cube behaviour  comfortably.

Step 3

Add the cube's markup to your HTML:

<div id="the-cube" class="the-cube">
  <span class="side-1"></span>
  <span class="side-2"></span>
  <span class="side-3"></span>
  <span class="side-4"></span>
  <span class="side-5"></span>
  <span class="side-6"></span>
</div>

Step 4

Customize the cube styles to your liking:

.the-cube {
  margin: 80px auto;
}

.the-cube > span {
  background-image: url(../images/cube/cube-texture.jpg);
}

Texture image appears as below. Feel free to use it as an template for your own cube! You can find a PSD template here.

Cube Texture

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.

Step 5

Initiate the script:

var myCube = new Cube('#the-cube');

myCube.rotate({
  speedX: 10000,
  speedY: 10000,
  speedZ: 10000,
  startSide: 'side-1'
});

Step 6

Enjoy!

Visit our GitHub page and stay tuned for more open source projects in the near future!

About the author

Artur Kot

Artur Kot is a front-end engineer at Xfive. He is interested in graphic and web design and likes to experiment with modern technologies. Check some of those experiments at arturkot.pl.

More articles from Artur

Comments

Would you like to add something?

All fields are required. Your email address will not be published.

Check out 6 reasons why our clients keep coming back

Partner with us

More from the blog

Submit a Project