<div class='container'>
<div class='box box11'>
            <div class='left side '></div>
            <div class='right side'></div>
            <div class='top side'></div>
            <div class='bottom side'></div>
</div>
</div>

.container {
    position: relative;
    top: 500px;
}
.box {
    position: absolute;
    font-size: 4em;
    width: 2em;
    height: 2em;
    margin: 1.5em auto;
    perspective: 10000px;
    transform-style: preserve-3d;
    transform: rotateX(-40deg) rotateY(44deg);
}
.box11 {
    animation: rot11 12s linear infinite;
}

.side {
    position: absolute;
    width: 2em;
    height: 2em;
    background: linear-gradient(#e66465, #9198e5);
    color: white;
}

.top    {
    transform: rotateX( 90deg)  translateZ(1em);
    background: linear-gradient(153deg , #e66465, #9198e5);
    animation: topUCol 24s linear infinite;
    }

.right  {
    transform: translateZ(1em);
    animation: rightUCol 24s linear infinite;
    }

.left   {
    transform: rotateY(-90deg)  translateZ(1em);
    background: linear-gradient(127deg , #c45a5b, #6f76b2);
    }
.bottom {
    transform: rotateX(-90deg)  translateZ(1em);
    animation: bottomUCol 24s linear infinite;
    }

@keyframes rot11 {
    0%   {transform: rotateX(-40deg) rotateY(44deg);}
    10%  {transform: rotateX(-40deg) rotateY(44deg) translate3d(0,-507px,0);}
    40%  {transform: rotateX(-40deg) rotateY(44deg) translate3d(0, -507px, 0) ;}
    50%  {transform: rotateX(-40deg) rotateY(44deg) translate3d(0, -507px, 0);}
    60%  {transform: rotateX(40deg) rotateY(44deg) translate3d(0, -507px, 0);}
    70%  {transform: rotateX(40deg) rotateY(44deg) translate3d(0, -507px, 0);}
    80%  {transform: rotateX(40deg) rotateY(44deg) translate3d(0, -507px, 0);}
    90%  {transform: rotateX(40deg) rotateY(44deg) ;}
    100% {transform: rotateX(-40deg) rotateY(44deg) ; }
}