Work with us

Let us know your requirements and we'll get back to you as soon as possible.
Drop files here or click to upload

We care about your privacy and automatically agree to the following NDA. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Submit

Thank you, !

Thank you very much for submitting your inquiry to Xfive! We'll be in touch with you soon.
Gopika Setlur
Gopika Setlur Elefint Designs, Inc.
Xfive is an extremely reliable and professional development partner. They have helped us improve our process and offerings. We really appreciate their flexibility, quality, and attention to detail.
Home Blog CSS3 Cube - Our First Open Source Plugin

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.

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

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 from Artur
More from Artur

Would you like to add something?

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

Submit

Related blog posts

Start your project or scale your team