Animated 3d Cube

Rotates to show various sides. Should stop on one of the corners to reveal 3 sides at a time

HTML

<div class="stage" style="width: 120px; height: 120px;">
    <div class="cubespinner">
        <div class="face1"></div>
        <div class="face2">A</div>
        <div class="face3">C</div>
        <div class="face4"><span>T<span></div>
<!--         <div class="face5">5</div>
        <div class="face6">6</div> -->
    </div>
</div>

CSS

@-webkit-keyframes spincube {
   /*  from, to {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    } */
    from {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    to {
       -webkit-transform: rotateY(-135deg) rotateZ(45deg); 
    }
     16% {
        -webkit-transform: rotateY(-90deg);
    }
    33% {
        -webkit-transform: rotateY(-90deg) rotateZ(90deg);
    }
    50% {
        -webkit-transform: rotateY(-180deg) rotateZ(90deg);
    }
     66% {
        -webkit-transform: rotateY(-270deg) rotateX(90deg);
    }
      83% {
        -webkit-transform: rotateX(90deg);
    }
}
@keyframes spincube {
     from, to {
        -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16% {
        -moz-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }
    33% {
        -moz-transform: rotateY(-90deg) rotateZ(90deg);
        -ms-transform: rotateY(-90deg) rotateZ(90deg);
        transform: rotateY(-90deg) rotateZ(90deg);
    }
    50% {
        -moz-transform: rotateY(-180deg) rotateZ(90deg);
        -ms-transform: rotateY(-180deg) rotateZ(90deg);
        transform: rotateY(-180deg) rotateZ(90deg);
    }
    66% {
        -moz-transform: rotateY(-270deg) rotateX(90deg);
        -ms-transform: rotateY(-270deg) rotateX(90deg);
        transform: rotateY(-270deg) rotateX(90deg);
    }
    83% {
        -moz-transform: rotateX(90deg);
        -ms-transform: rotateX(90deg);
        transform: rotateX(90deg);
    }
}
.stage {
    margin: 45px 0 0 45px;
}
.cubespinner {
    -webkit-animation-name: spincube;
    -webkit-animation-timing-function: ease-in-out;
     -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
    animation-name: spincube;
    animation-timing-function: ease-in-out;
    ...