JSFiddle - React, Tailwind, and code Playground

by Raphael Quintao

HTML

<div class="card-container">
  <div class="card">
    <div class="front">Front Side</div>
    <div class="back">Back Side</div>
  </div>
</div>

CSS

.card-container {
  width: 200px;
  height: 300px;
  perspective: 1000px; /* Gives the 3D effect depth */
  margin: auto;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d; /* Ensures children elements participate in the 3D space */
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hides the back of the card when facing away */
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.front {
  background-color: #3498db;
}

.back {
  background-color: #e74c3c;
  transform: rotateY(180deg); /* Rotates the back side by default */
}

.card-container:hover .card {
  transform: rotateY(180deg); /* Flips the card on hover */
}