.cube-face {
    width:inherit;
    height:inherit;
    position:absolute;
    transition: 2s;
    border-style: solid;
}

.front {
    transform: translate3d(0, 0, 100px);
    transition:2s;
}
.back {
    transform: rotateY(180deg) translate3d(0, 0, 100px);
}
.left {
    transform: rotateY(-90deg) translate3d(0, 0, 100px);
}
.right {
    transform: rotateY(90deg) translate3d(0, 0, 100px);
}
.top {
    transform: rotateX(90deg) translate3d(0, 0, 100px);
}
.bottom {
    transform: rotateX(-90deg) translate3d(0, 0, 100px);
}

@keyframes spinner {
    from {transform: rotateY(0deg) rotateX(0deg);}
    to {transform: rotateY(359deg) rotateX(359deg);}
}