.spinner {
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 width: 100px;
 height: 100px;
}

.spinner::after {
 content: "";
 position: absolute;
 width: 50px;
 height: 50px;
 background-color: var(--blue);
 animation: flip 1s infinite;
}

@keyframes flip {
 0% {
  transform: rotate(0);
 }

 50% {
  transform: rotateY(180deg);
 }

 100% {
  transform: rotateY(180deg)  rotateX(180deg);
 }
}