.container {
    width: 1000px;
    height: 1000px;
    perspective: 2200px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    -ms-transform : translate(-50%, -50%);
    text-align : center;
}

#cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
}

#cube figure {
    width: 920px;
    height: 920px;
    line-height: 920px;
    text-align: center;
    display: block;
    position: absolute;
    border: 2px solid black;
}

#cube .front  { background: hsla(   0, 0%, 100%, 0.9 ); }
#cube .back   { background: hsla(  60, 100%, 50%, 0.7 ); }
#cube .right  { background: hsla( 120, 100%, 50%, 0.7 ); }
#cube .left   { background: hsla( 180, 100%, 50%, 0.7 ); }
#cube .top    { background: hsla( 240, 100%, 50%, 0.7 ); }

#cube .front  { transform: rotateY(   0deg ) translateZ( 460px ); }
#cube .back   { transform: rotateX( 180deg ) translateZ( 460px ); }
#cube .right  { transform: rotateY(  90deg ) translateZ( 460px ); }
#cube .left   { transform: rotateY( -90deg ) translateZ( 460px ); }
#cube .top    { transform: rotateX(  90deg ) translateZ( 460px ); }
#cube .bottom { transform: rotateX( -90deg ) translateZ( 460px ); }

#cube { transform: translateZ( -460px ); }

#cube.show-front  { transform: translateZ( -460px ) rotateY(    0deg ); }
#cube.show-back   { transform: translateZ( -460px ) rotateX( -180deg ); }
#cube.show-right  { transform: translateZ( -460px ) rotateY(  -90deg ); }
#cube.show-left   { transform: translateZ( -460px ) rotateY(   90deg ); }
#cube.show-top    { transform: translateZ( -460px ) rotateX(  -90deg ); }
#cube.show-bottom { transform: translateZ( -460px ) rotateX(   90deg ); }

#cube { transition: transform 1s; }