.square-spinner {
    width: 100px;
    display: block;
    background-color: #03A9F4;
    height: 100px;
    -webkit-animation: 3s rotate2 ease-in-out infinite;
    animation: 3s flip ease-in-out infinite;
    position: absolute;
    top: 50%;
    left: 50%;
}
@-webkit-keyframes flip {
    0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    25% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    }
    50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    }
    75% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
    transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
    }
    100% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
    transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
    }
}
  
@keyframes flip {
    0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    25% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    }
    50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    }
    75% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
    transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
    }
    100% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
    transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
    }
}