/**
 * Ideal CSS3 Cube
 * Zachary Johnson
 * http://www.zachstronaut.com
 * July 2010
 */

.cube
{
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-transform-style: preserve-3d;
}

.cube li,
.cube li > div
{
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.cube li > div
{
    left: 0;
    top: 0;
}

.cube li.front
{
}

.cube li.front > div
{
}

.cube li.back
{
    -webkit-transform: rotateX(90deg) translate3d(0, -100%, 0) rotateX(-90deg);
}

.cube li.back > div
{
    background: rgba(0, 0, 0, 0.6);
}

.cube li.top
{
    -webkit-transform-origin: top left;
    -webkit-transform: rotateX(-90deg);
}

.cube li.top > div
{
    background: rgba(0, 0, 0, 0.2);
}

.cube li.bottom
{
    -webkit-transform-origin: bottom left;
    -webkit-transform: rotateX(90deg);
}

.cube li.bottom > div
{
    background: rgba(0, 0, 0, 0.7);
}

.cube li.left
{
    -webkit-transform-origin: top left;
    -webkit-transform: rotateY(90deg);
}

.cube li.left > div
{
    background: rgba(0, 0, 0, 0.5);
}

.cube li.right
{
    -webkit-transform-origin: top right;
    -webkit-transform: rotateY(-90deg);
}

.cube li.right > div
{
    background: rgba(0, 0, 0, 0.3);
}