CSS 3 : Cube Rotation Exercise

HTML

<div class="canvas">
        <div class="cube">
                <div class="face one">
                        FACE ONE
                </div>
                <div class="face two">
                        FACE TWO
                </div>
                <div class="face three">
                        FACE THREE
                </div>
                <div class="face four">
                        FACE FOUR
                </div>
                <div class="face five">
                        FACE FIVE
                </div>
                <div class="face six">
                        FACE SIX
                </div>
        </div>
</div>

CSS

.canvas{
      -moz-perspective: 800;
      -moz-perspective-origin: 50% 200px;
      -webkit-perspective: 800;
      -webkit-perspective-origin: 50% 200px;
}


.cube {
      position: relative;
      margin: 0 auto;
      height: 400px;
      width: 400px;
      -moz-transition: -moz-transform 4s linear;
      -moz-transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 3s linear;
      -webkit-transform-style: preserve-3d;
      transition: transform 3s linear;
      transform-style: preserve-3d;
    }

.face {
      position: absolute;
      height: 360px;
      width: 360px;
      padding: 20px;
    }

.cube .one  {
      background-color:rgba(255,0,0,.25);
      -moz-transform: rotateX(90deg) translateZ(200px);
      -webkit-transform: rotateX(90deg) translateZ(200px);
}

.cube .two {
      background-color:rgba(0,255,0,.25);
      -moz-transform: translateZ(200px);
      -webkit-transform: translateZ(200px);
}

.cube .three {
      background-color:rgba(0,0,255,.25);
      -moz-transform: rotateY(90deg) translateZ(200px);
      -webkit-transform: rotateY(90deg) translateZ(200px);
}

.cube .four {
      background-color:rgba(255,255,0,.25);
      -moz-transform: rotateY(180deg) translateZ(200px);
      -webkit-transform: rotateY(180deg) translateZ(200px);
}

.cube .five {
      background-color:rgba(255,0,255,.25);
      -moz-transform: rotateY(-90deg) translateZ(200px);
      -webkit-transform: rotateY(-90deg) translateZ(200px);
}

.cube .six {
      background-color:rgba(0,255,255,.25);
      -moz-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
      -webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
}

.cube:hover{
   -moz-animation:rotation 3s infinite;
   -webkit-animation:rotation 3s infinite;
}


@-moz-keyframes rotation{
    0% {-moz-transform: rotateX(90deg) rotateY(-90deg);}
    25% {-moz-transform: rotateX(-90deg) rotateY(90deg);}
    50% {-moz-transform: rotateX(90deg) rotateY(-90deg);}
    75%...