body {
    background-color: #000;
    font-family:Helvetica,sans-serif;
}
.container {
    width:500px;
    height:500px;
    position:relative;
    margin: 0px auto 0px auto;
    top: 100px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
}
#tilt {
    width:100%;
    height:100%;
    position:absolute;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(-22deg);
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateX(-22deg);
}
#cube {
    -webkit-transform-style: preserve-3d;
    -webkit-transform:translateZ(-100px) rotateY(0deg);
    -webkit-animation: cubeRotation 7s linear infinite;
    -moz-transform-style: preserve-3d;
    -moz-transform:translateZ(-100px) rotateY(0deg);
    -moz-animation: cubeRotation 7s linear infinite;
}
#cube figure {
    width:500px;
    height:500px;
    display:block;
    position:absolute;
    margin:0;
    font-size:5em;
}
#cube .front {
    -webkit-transform:rotateY(0deg) translateZ(300px);
    -moz-transform:rotateY(0deg) translateZ(300px);
}
#cube .back {
    -webkit-transform:rotateY(180deg) translateZ(300px);
    -moz-transform:rotateY(180deg) translateZ(300px);
}
#cube .left {
    -webkit-transform:rotateY(-90deg) translateZ(300px);
    -moz-transform:rotateY(-90deg) translateZ(300px);
}
#cube .right {
    -webkit-transform:rotateY(90deg) translateZ(300px);
    -moz-transform:rotateY(90deg) translateZ(300px);
}
#footer {
    color: #fff;
    font-style: italic;
    font-size: 0.75em;
    position: absolute;
    bottom: 0px;
    right: 0px;
    margin: 5px;
}

@-webkit-keyframes cubeRotation {
    from {
        -webkit-transform: translateZ(-100px) rotateY(0deg);
    }
    to {
        -webkit-transform: translateZ(-100px) rotateY(360deg);
    }
}

@-moz-keyframes cubeRotation {
    from {
        -moz-transform: translateZ(-100px) rotateY(0deg);
    }
    to {
        -moz-transform: translateZ(-100px) rotateY(360deg);
    }
}