@keyframes square-spin {
    25% {
        transform: perspective(100px) rotateX(180deg) rotateY(0);
    }
    50% {
        transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    }
    75% {
        transform: perspective(100px) rotateX(0) rotateY(180deg);
    }
    100% {
        transform: perspective(100px) rotateX(0) rotateY(0);
    }
}

.square-spin > div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    width: 50px;
    height: 50px;
    background: var(--bs-purple);
    -webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
    animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}