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% {
    filter: brightness(100%);
  }
  25% {
    transform: scale(1.1) rotate3d(0.2, 1, 0.2, 10deg);
    filter: brightness(125%);
  }
  50% {
    filter: brightness(100%);
  }
  75% {
    transform: scale(1.1) rotate3d(0.2, -1, -0.2, 10deg);
    filter: brightness(125%);
  }
  100% {
    filter: brightness(100%);
  }
}

img {
  display: block;
  margin: 50px auto;
  width: 200px;
  transition: 0.2s all ease-in-out;
  transform-origin: center;
  perspective: 1000px;
  transform-style: preserve-3d;
  filter: brightness(100%);
}

img:hover {
  transform: scale(1.1);
  animation: move-card 4s linear infinite;
}