JSFiddle - React, Tailwind, and code Playground

HTML

<p>behold</p>
<div class="parent">
  <div class="card card-front">
    <img src="https://megidochan.de/hsg/thumb/1742872275676-0.png"/>
  </div>
  <div class="card card-back">
    <img src="https://megidochan.de/hsg/thumb/1742872275676-1.png"/>
  </div>
</div>

CSS

@keyframes rotateTilt {
  0% {
    transform: perspective(800px) rotateY(0deg) rotateX(0deg);
  }
  25% {
    transform: perspective(800px) rotateY(90deg) rotateX(10deg);
  }
  50% {
    transform: perspective(800px) rotateY(180deg) rotateX(0deg);
  }
  75% {
    transform: perspective(800px) rotateY(270deg) rotateX(-10deg);
  }
  100% {
    transform: perspective(800px) rotateY(360deg) rotateX(0deg);
  }
}

.card{
  display: inline-block;
  transform-style: preserve-3d;
  animation: rotateTilt 4s infinite linear;
}

.parent {
   position: relative;
}
    
.card-front {
   position: absolute;
   top: 0;
   backface-visibility: hidden;
}
  
.card-back {
   position: absolute;
   top: 0;
   backface-visibility: hidden;
   animation-delay: -2s;
}