Animation d'un cube en 3D uniquement via CSS

HTML

<div id="cube">
    <span id="x">X</span>
    <span id="y">Y</span>
    <span id="z">Z</span>
    
    <div id="top"   ></div>
    <div id="bottom"></div>
    <div id="front" ></div>
    <div id="back"  ></div>
    <div id="left"  ></div>
    <div id="right" ></div>
</div>

CSS

body
{
    overflow: hidden;
}
#cube
{
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;

    -webkit-transform: rotateX(-25deg) rotateY(25deg);
       /*-moz-transform: rotateX(-25deg) rotateY(25deg);*/
        -ms-transform: rotateX(-25deg) rotateY(25deg);
         -o-transform: rotateX(-25deg) rotateY(25deg);
            transform: rotateX(-25deg) rotateY(25deg);

    width:  300px;
    height: 300px;

    position: absolute;
    left: 50%;
    top:  50%;
    margin-left: -150px;
    margin-top:  -150px;
    
    -webkit-transition: all 500ms;
       /*-moz-transition: all 500ms;*/
        -ms-transition: all 500ms;
         -o-transition: all 500ms;
            transition: all 500ms;
}


#cube span
{
    width:  400px;
    height: 0;
    border-top: 1px dashed black;
    position: absolute;
    left: 50%;
    top:  50%;
    margin-left: -200px;
}

#y
{
    -webkit-transform: rotateZ(-90deg);
       -moz-transform: rotateZ(-90deg);
        -ms-transform: rotateZ(-90deg);
         -o-transform: rotateZ(-90deg);
            transform: rotateZ(-90deg);
}
#z
{
    -webkit-transform: rotateY(-90deg);
       -moz-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
         -o-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
}


#cube div
{
    width:  200px;
    height: 200px;
    opacity: 0.25;
    position: absolute;
    left: 50%;
    top:  50%;
    margin-left: -100px;
    margin-top:  -100px;
    
    -webkit-transition: all 500ms;
       -moz-transition: all 500ms;
        -ms-transition: all 500ms;
         -o-transition: all 500ms;
            transition: all 500ms;
}


#top
{
    background-color: red;
}
#bottom
{
    background-color: green;
}
#front
{
    background-color: blue;
}
#back
{
    background-color: yellow;
}
#left
{
    background-color:...