JSFiddle - React, Tailwind, and code Playground

by Katarn

HTML

<img src="//images.ctfassets.net/s5n2t79q9icq/7lEPRZ3WWZ1wyaTqrL4vR3/f566bf15f4d2322ea7674a1c09350dcb/HHSV82iDIQ_265x370_SP.png">

CSS

@keyframes move_card {
  0% {
    transform: scale(1.1) rotate3d(0.2, 1, 0.2, 15deg);
    filter: brightness(100%);
  }
  25% {
    filter: brightness(125%);
  }
  50% {
    transform: scale(1.1) rotate3d(0.2, -1, -0.2, 15deg);
    filter: brightness(100%);
  }
  75% {
    filter: brightness(125%);
  }
  100% {
    transform: scale(1.1) rotate3d(0.2, 1, 0.2, 15deg);
    filter: brightness(100%);
  }
}

img {
  display: block;
  margin: 50px auto;
  width: 200px;
  transform-origin: center;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

img:hover {
  transform: scale(1.1) rotate3d(0.2, 1, 0.2, 15deg);
  animation: move_card 4s ease-in-out infinite 0.5s;
  animation-delay: 0.5s;
}