CSS旋转立方体以显示每个时间的不同面

Question

我用CSS创建了一个多维数据集，并尝试添加:hover动作，每次将X轴上的立方体旋转270度。我遇到的问题是，一旦旋转结束，立方体会跳回原来的朝向一侧。我希望每次在新的:hover上展示不同的面孔。这是它的jfiddle http://jsfiddle.net/RuNpiXelruN/LLj0wfw2/

请找到以下代码：

HTML：

<div class="cube-main">
      <div class="cube">
            <div class="face-1">
                Face One
            </div>
            <div class="face-2">
                Face 2
            </div>
            <div class="face-3">
                Face 3
            </div>
            <div class="face-4">
                Face 4
            </div>
      </div>
 </div>

CSS：

   .cube-main {
        perspective: 44vw;
        perspective-origin: 11vw 0vw;
        position: absolute;
        left: 51vw;
    }
    .cube {
        position: relative;
        height: 4vw;
        width: 18vw;
        transform-style: preserve-3d;
    }
    .face-1, .face-2, .face-3, .face-4 {
        height: 4vw;
        width: 18vw;
        position: absolute;
    }

    .face-1 {
        background: red;
        transform: translateZ(2vw);
    }
    .face-2 {
        background: blue;
        transform: rotateX(-90deg) translateY(-2vw);
        transform-origin: top center;
    }
    .face-3 {
        background: green;
        transform: translateZ(-2vw) rotateY(180deg);
    }
    .face-4 {
        background: yellow;
        transform: rotateX(90deg) translateY(2vw);
        transform-origin: bottom center;
    }
    @keyframes spin {
        from { transform: rotateX(0); }
        to { transform: rotateX(270deg); }
    }

    .cube:hover {
        animation: spin 1s ease;
    }

小提琴http://www.jsfiddle.net/RuNpiXelruN/LLj0wfw2

立方体看起来就像我想要的那样，它只是悬停并显示出我坚持的新面孔。

谢谢你们

贾斯汀