css3 Cube and transition

by nikolya223

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;
    -webkit-transition: 1s ease;
    transition: 1s ease;
}
.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:...

JavaScript

function randomTime(){
    $(".cube-side").each(function(){
         CustomSize($(this))
    } )
}

function CustomSize(elem){
     $a       = getRandom(0,255);
     $b       = getRandom(0,255);
     $c       = getRandom(0,255);
     $d       = getRandom(40,100);
     $borderW = getRandom(0,5);
     elem.css({
        "background-color":"rgba("+$a+","+$b+","+$c+","+$d/100+")",
        "color"     :"rgb("+(255-$a)+","+(255-$b)+","+(255-$c)+")"
         })
 
}

function getRandom($min,$max){
    $rand =   Math.random()*($max-$min+1);
    $rand =   Math.floor($rand);
    return $rand;
}
setInterval(function(){randomTime()},1000);