.loader{
    width: 150px;
    height: 150px;
    margin: 20px auto 0;
    perspective: 300px;
    transform-style: preserve-3d;
    position: relative;
}
.loader div{
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.loader .inner_loader_1{
    background-color: #eb2f06;
    animation-name: side1;
}
.loader .inner_loader_2{
    background-color: #ff9f43;
    animation-name: side2;
}
.loader .inner_loader_3{
    background-color: #be2edd;
    animation-name: side3;
}
.loader .inner_loader_4{
    background-color: #10ac84;
    animation-name:side4;
}
.loader .inner_loader_5{
    background-color: #4834d4;
    animation-name: side5;
}
.loader .inner_loader_6{
    background-color: #1e3799;
    animation-name: side6;
}
@keyframes side1{
    0%{
        border-radius: 0px;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(50px);
    }
    25%{
        border-radius: 25px;
        transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(75px);
    }
    50%{
        border-radius: 50px;
        transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateZ(100px);
    }
    75%{
        border-radius: 25px;
        transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateZ(75px);
    }
    100%{
        border-radius: 0px;
        transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg) translateZ(50px);
    }
}
@keyframes side2{
    0%{
        border-radius: 0px;
        transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateZ(50px);
    }
    25%{
        border-radius: 25px;
        transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateZ(75px);
    }
    50%{
        border-radius: 50px;
        transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateZ(100px);
    }
    75%{
        border-radius: 25px;
        transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg) translateZ(75px);
    }
    100%{
        border-radius: 0px;
        transform: rotateX(0deg) rotateY(450deg) rotateZ(0deg) translateZ(50px);
    }
}
@keyframes side3{
    0%{
        border-radius: 0px;
        transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) translateZ(50px);
    }
    25%{
        border-radius: 25px;
        transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateZ(75px);
    }
    50%{
        border-radius: 50px;
        transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg) translateZ(100px);
    }
    75%{
        border-radius: 25px;
        transform: rotateX(0deg) rotateY(450deg) rotateZ(0deg) translateZ(75px);
    }
    100%{
        border-radius: 0px;
        transform: rotateX(0deg) rotateY(540deg) rotateZ(0deg) translateZ(50px);
    }
}
@keyframes side4{
    0%{
        border-radius: 0px;
        transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) translateZ(50px);
    }
    25%{
        border-radius: 25px;
        transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg) translateZ(75px);
    }
    50%{
        border-radius: 50px;
        transform: rotateX(0deg) rotateY(450deg) rotateZ(0deg) translateZ(100px);
    }
    75%{
        border-radius: 25px;
        transform: rotateX(0deg) rotateY(540deg) rotateZ(0deg) translateZ(75px);
    }
    100%{
        border-radius: 0px;
        transform: rotateX(0deg) rotateY(630deg) rotateZ(0deg) translateZ(50px);
    }
}
@keyframes side5{
    0%{
        border-radius: 0px;
        transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg) translateZ(50px);
    }
    25%{
        border-radius: 25px;
        transform: rotateX(90deg) rotateY(0deg) rotateZ(-90deg) translateZ(75px);
    }
    50%{
        border-radius: 50px;
        transform: rotateX(90deg) rotateY(0deg) rotateZ(-180deg) translateZ(100px)
     }
    75%{
        border-radius: 25px;
        transform: rotateX(90deg) rotateY(0deg) rotateZ(-270deg) translateZ(75px);
    }
    100%{
        border-radius: 0px;
        transform: rotateX(90deg) rotateY(0deg) rotateZ(-360deg) translateZ(50px);
    }
}
@keyframes side6{
    0%{
        border-radius: 0px;
        transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translateZ(50px);
    }
    25%{
        border-radius: 25px;
        transform: rotateX(-90deg) rotateY(0deg) rotateZ(90deg) translateZ(75px);
    }
    50%{
        border-radius: 50px;
        transform: rotateX(-90deg) rotateY(0deg) rotateZ(180deg) translateZ(100px);
    }
    75%{
        border-radius: 25px;
        transform: rotateX(-90deg) rotateY(0deg) rotateZ(270deg) translateZ(75px);
    }
    100%{
        border-radius: 0px;
        transform: rotateX(-90deg) rotateY(0deg) rotateZ(360deg) translateZ(50px);
    }
}