Front
Back
Right
Left
Top
Bottom
**Notice**, when the rotate applied to the element, its coordinates will rotate with it. In this case, all Z-indices rotate to pointing outside the cube. 
`
/*HTML*/
div.container
    div.cube
        fiture.front{Front}
        fiture.back{Back}
        fiture.right{Right}
        figure.left{Left}
        figure.top{Top}
        figure.bottom{Bottom}


/CSS/
.container{
width:200px;
height:200px;
position:relative;
perspective:1000px;
}
.cube{
width:100%;
height:100%;
position:absolute;
transform-style:preserve-3d;
}
.cube figure{ //Set single Aspect
width:196px;
height:196px;
border:2px solid #ccc;
position:absolute;
font-size:20px;
line-height:196px;
font-weight:bold;
color:white;
text-align:center;
transition:transform 1s ease;
}
.cube:hover .front{
background: hsla( 0, 100%, 50%, 0.5 );
transform:translateZ(100px);
}


.cube:hover .back{
background: hsla( 60, 100%, 50%, 0.5 );
transform:rotateY(180deg) translateZ(100px);
}


.cube:hover .right{
background: hsla( 120, 100%, 50%, 0.5 );
transform: rotateY(90deg) translateZ(100px);
}


.cube:hover .left{
background: hsla( 180, 100%, 50%, 0.5 );
transform: rotateY(-90deg) translateZ(100px);
}


.cube:hover .top{
background: hsla( 240, 100%, 50%, 0.5 );
transform: rotateX(90deg) translateZ(100px);
}


.cube:hover .bottom{
background: hsla( 300, 100%, 50%, 0.5 );
transform: rotateX(-90deg) translateZ(100px);
}
`