3d立方体一次显示3个边

Question

我一直在寻找不同的教程来在CSS3中制作旋转的3D立方体。来自the-art-of-the-web的本教程是我决定利用的。

我的最终目标是让它看起来与此相似：

我希望最终状态显示立方体的3个边。我可能还需要旋转整个多维数据集，以便A和T之间的底角指向下方。

Working fiddle (-webkit)

@-webkit-keyframes spincube {
    from {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    to {
       -webkit-transform: rotateY(-180deg) rotateZ(90deg) rotateZ(15deg); 
    }
}

Answer 1

参见 DEMO

-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;

这种方式可以保留动画状态。