Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A CSS3 animated 3D Cube layout

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.md
Octocat-spinner-32 cube5.css
Octocat-spinner-32 index.html
README.md

Cube5: A CSS3 animated 3D Cube layout

Cube5 is a set of CSS classes that allow you to create a 3D layout similar to that seen in certain OS X applications such as Quicksilver. The 3D effect works only on Webkit nightly for now, but the layout is accessible for every browser.

Click here for a screencast of the effect.

Demo here

How to use

Cube5 is entirely CSS(3) based, including the animations, so it only requires that you include the CSS snippet cube5.css. The markup should look like this

<div class="cube-container" id="demo-cube">
  <div class="cube toFront">      
    <div class="face top"><h3>Top</h3></div>
    <div class="face front"><h3>Front</h3></div>
    <div class="face bottom"><h3>Bottom</h3></div>
    <div class="face left"><h3>Left</h3></div>
    <div class="face right"><h3>Right</h3></div>
    <div class="face rear"><h3>Rear</h3></div>      
  </div>
</div>

In order to change the currently shown face, programmatically change the class of the cube from toFront to toTop, toBottom, toLeft, toRight or toRear.

In jQuery:

$('#demo-cube .cube').attr('class', 'cube toRear');

In MooTools

$$('#demo-cube .cube').set('class', 'cube toRear');

When the class is changed, the cube will transition to the designated face (if -webkit-transform-3d is supported) or simply switch without a transition if the effect is not supported.

Notes

If you change the width of the cube, make sure to adapt the values of translateZ to half the width.

Something went wrong with that request. Please try again.