Create a 3D Flip Card using CSS

In this tutorial, you will learn how to create a 3D flip card using HTML and CSS, as shown here.

HTML

<!-- Container for the entire flip card -->
<div class="flip-card"> 
  <!-- Inner container holding the front and back sides of the card -->
  <div class="flip-card-inner"> 
    <!-- Front side of the flip card -->
    <div class="flip-card-front"> 
      <!-- Content displayed on the front side -->
      <h2>Hover Me! 👋</h2> 
    </div> 
    <!-- Back side of the flip card -->
    <div class="flip-card-back"> 
      <!-- Inner content displayed on the back side -->
      <div class="flip"> 
        <h2>Awesome! 🎉</h2> 
        <p>This is a 3D flip card effect using CSS transforms</p> 
      </div> 
    </div> 
  </div> 
</div>

CSS

/* Outer container for the flip card */
.flip-card {
  /* Set fixed width and height for the card */
  width: 300px;
  height: 400px;
  /* Add 3D perspective effect */
  perspective: 1000px;
  /* Change cursor to pointer on hover */
  cursor: pointer;
}

/* Inner container that holds the front and back faces */
.flip-card-inner {
  /* Positioning relative to manage internal absolute elements */
  position: relative;
  /* Full width and height of the card */
  width: 100%;
  height: 100%;
  /* Enable 3D transformations */
  transform-style: preserve-3d;
  /* Smooth rotation transition */
  transition: transform 0.6s;
}

/* Apply 3D rotation when the card is hovered */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Shared styles for both front and back faces */
.flip-card-front, .flip-card-back {
  /* Absolute positioning within the container */
  position: absolute;
  /* Cover the entire area of the card */
  width: 100%;
  height: 100%;
  /* Hide the reverse side until rotated */
  backface-visibility: hidden;
  /* Add rounded corners */
  border-radius: 15px;
  /* Add subtle shadow for depth */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Center content inside */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Center text and add padding for spacing */
  text-align: center;
  padding: 20px;
  /* Ensure consistent box model calculation */
  box-sizing: border-box;
}

/* Styles for the front face of the card */
.flip-card-front {
  /* Gradient background for visual appeal */
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  /* White text color */
  color: white;
}

/* Styles for the back face of the card */
.flip-card-back {
  /* Gradient background with a different color scheme */
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  /* White text color */
  color: white;
  /* Rotate the back face to make it initially hidden */
  transform: rotateY(180deg);
}

/* Style for text inside the back face */
.flip {
  /* Font size and line spacing for readability */
  font-size: 20px;
  line-height: 150%;
}