css3 Cube and transition

by Alex

HTML

<div class="cube">
    <div class="cube-side cube-side_top">TOP</div>
    <div class="cube-side cube-side_bottom">BOTTOM</div>
    <div class="cube-side cube-side_front">FRONT</div>
    <div class="cube-side cube-side_back">BACK</div>
    <div class="cube-side cube-side_left">LEFT</div>
    <div class="cube-side cube-side_right">RIGHT</div>
</div>

CSS

html {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.34) 50%,rgba(0,0,0,0.5) 100%);
    width:100%;
    height:100%;
    font: 0.75em/1.5em Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
    display:table;
}
body {
    margin:0;
    display:table-cell;
    vertical-align:middle;
    -webkit-perspective: 500px;
    perspective: 500px;
}
.cube {
    width:200px;
    height:200px;
    position:relative;
    margin:auto;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    -webkit-transform: rotate3D(0, 0, 0, 0deg) translate3D(0px, 0px, 0px);
    transform: rotate3D(0, 0, 0, 0deg) translate3D(0px, 0px, 0px);
    
    -webkit-animation: spinCube 8s infinite ease;
    animation: spinCube 8s infinite ease;
}
.cube-side {
    width:200px;
    height:200px;
    color:#fff;
    font-size:30px;
    font-weight:bold;
    line-height:200px;
    text-align:center;
    border:1px solid #000;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    position:absolute;
    box-shadow:0 0 25px 10px rgba(0,0,0,.4);
    -webkit-backface-visibility:visible;
    backface-visibility:visible;
}
.cube-side_top {
    background:rgba(180,0,0,.4);
    -webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 100px);
    transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 100px);
}
.cube-side_bottom {
    background:rgba(180,0,180,.4);
    -webkit-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 100px);
    transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 100px);
}
.cube-side_front {
    background:rgba(0,180,180,.4);
    -webkit-transform: rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 100px);
    transform: rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 100px);
}
.cube-side_back {
    background:rgba(0,0,180,.4);
    -webkit-transform: rotate3d(1, 0, 0, -180deg) translate3d(0, 0, 100px);
    transform: rotate3d(1, 0, 0, -180deg) translate3d(0, 0,...