@keyframes spincube {
    from,to {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }		
    16% {
        transform: rotateY(-90deg);
    }		
    33% {
        transform: rotateY(-90deg) rotateZ(90deg);
    }		
    50% {
        transform: rotateY(-180deg) rotateZ(90deg);
    }		
    66% {
        transform: rotateY(-270deg) rotateX(90deg);
    }	
    83% {
        transform: rotateX(90deg);
    }
}
.cubespinner {
    animation-name: spincube;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 12s;
    transform-style: preserve-3d;
    transform-origin: 20px 20px 0;
 }
 .cubespinner div {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid #be6fb7;
    background: rgb(115,32,107);
background: linear-gradient(195deg, rgba(115,32,107,1) 58%, rgba(115,107,107,1) 100%);
    box-shadow: inset 0 0 20px #be6fb7;
    line-height: 20px;
    text-align: center;
    font-size: 10px;
    color:#FFF;
} 
 
.cubespinner .face1 {
    transform: translateZ(20px);
}
 
.cubespinner .face2 {
    transform: rotateY(90deg) translateZ(20px);
}
 
.cubespinner .face3 {
    transform: rotateY(90deg) rotateX(90deg) translateZ(20px);
}	  
 
.cubespinner .face4 {
    transform: rotateY(180deg) rotateZ(90deg) translateZ(20px);
}	  
 
.cubespinner .face5 {
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(20px);
}   
 
.cubespinner .face6 {
    transform: rotateX(-90deg) translateZ(20px);
}