body{
    perspective: 300px;
    perspective-origin: center center;
    background: #000;
}

.container{
    transform-style: preserve-3d;
    width: 9em;
    height: 9em;
    margin: 20% auto;
    animation: rotate 15s infinite linear;
}

.sides{
    position: absolute;
    width: 9em;
    height: 9em;
    border-radius: 10%;
    animation: chcol 3s 1s infinite linear;
    transform-style: preserve-3d;
}

.side-1{
    transform: translateZ(-50px) rotateY(180deg)
}

.side-2{
    transform: translateZ(50px) ;
}

.side-3{
    transform: translateX(-50px) rotateY(270deg);
}

.side-4{
    transform: translateX(50px) rotateY(90deg);
}

.side-5{
    transform: translateY(-50px) rotateX(90deg);
}

.side-6{
    transform: translateY(50px) rotateX(270deg);
}

.sides:before,.sides:after{
    position: absolute;
    content: '';
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.sides:before{
    transform: translateZ(50px);
    width: 50%;
    height: 50%;
    border-radius: 10%;
    outline: 2px dotted rgba(255, 0, 255,.6);
    outline-offset: 10px;
    animation: chcol 7s 2s ease infinite;
}

.sides:after{
    transform: translateZ(80px);
    width: 25%;
    height: 25%;
    border-radius: 10%;
    animation: chcol 2s 3s ease infinite;
}

@keyframes rotate {
    100% {
        transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg);
    }
}

@keyframes chcol{
    0%{
        box-shadow: inset 0 0 50px #F900F3;
        border: 1px solid #F900F3;
    }
    25%{
        box-shadow: inset 0 0 150px #00B7F7;
        border: 1px solid #00B7F7;
    }
    75%{
        box-shadow: inset 0 0 30px #A000F4;
        border: 1px solid #A000F4;
    }
    100%{
        box-shadow: none;
        border: 1px solid transparent;
        content: none;
    }
}