JSFiddle - React, Tailwind, and code Playground

by Petra1999

HTML

<div class="parent">
  <div></div>
</div>

CSS

.parent {
  perspective: 1000px;
}

.parent div {
  background: #ff6b6b;
  width: 300px;
  height: 300px;
  margin: 0px;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}

.parent div:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transition: all 2s;
}