JSFiddle - React, Tailwind, and code Playground

by id0

HTML

<div class="a">
  <div class="d">
    <div class="i">
      card
    </div>
  </div>
</div>

SCSS

@keyframes flip-horizontal-top {
  0% {
    transform: rotateX(-180deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

.a {
  background: red;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.d {
  display: none;
}
  
.a:hover .d {
  display: block;
}

.i {
  background: beige;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: solid 4px gray; */
  /* transform: rotate3d(1, 0, 0, 115deg); */
  /* transition: all 0.2s ease-in; */
  /* transform-style: preserve-3d; */
  animation-name: flipInX;
}
  
.a:hover .i {
  /* transform: perspective(400px); */
	animation: flip-horizontal-top 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}