How to create flip card in css

CssHow-ToBeginner · 3 min read

How to Create a Flip Card in CSS: Simple Guide with Example

To create a flip card in CSS, use a container with perspective and two child elements for front and back faces. Apply transform-style: preserve-3d and transform: rotateY(180deg) on hover to flip the card smoothly.

📐

Syntax

A flip card uses a container with perspective to create depth. Inside, two elements represent the front and back faces. The container uses perspective and the inner wrapper uses transform-style: preserve-3d to keep 3D space, and the card flips by rotating on the Y-axis.

.flip-card: The outer container with perspective.
.flip-card-inner: The inner wrapper that flips.
.flip-card-front and .flip-card-back: The two faces of the card.

css

.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 300px;
  height: 200px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

💻

Example

This example shows a flip card with a front side labeled "Front" and a back side labeled "Back". Hovering over the card flips it smoothly to reveal the back.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Flip Card Example</title>
<style>
  .flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px;
    margin: 50px auto;
  }

  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 10px;
  }

  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: white;
  }

  .flip-card-front {
    background-color: #2980b9;
  }

  .flip-card-back {
    background-color: #e74c3c;
    transform: rotateY(180deg);
  }
</style>
</head>
<body>

<div class="flip-card" aria-label="Flip card">
  <div class="flip-card-inner">
    <div class="flip-card-front" role="img" aria-label="Front side">
      Front
    </div>
    <div class="flip-card-back" role="img" aria-label="Back side">
      Back
    </div>
  </div>
</div>

</body>
</html>

Output

A rectangular card with blue front side labeled 'Front'. When hovered, it flips horizontally to show a red back side labeled 'Back'.

⚠️

Common Pitfalls

Common mistakes include forgetting perspective on the container, which makes the flip look flat. Another is missing backface-visibility: hidden, causing both sides to show overlapped. Also, not setting transform-style: preserve-3d on the inner element stops the 3D effect.

css

.flip-card {
  /* Missing perspective causes no 3D effect */
}

.flip-card-inner {
  transition: transform 0.6s;
  /* Missing transform-style: preserve-3d stops flip */
}

.flip-card-front, .flip-card-back {
  /* Missing backface-visibility causes flicker */
}

/* Corrected version */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.flip-card-front, .flip-card-back {
  backface-visibility: hidden;
}

📊

Quick Reference

perspective: Adds depth to the container for 3D effect.
transform-style: preserve-3d: Keeps child elements in 3D space.
backface-visibility: hidden: Hides the back side when facing away.
transform: rotateY(180deg): Flips the card horizontally.
transition: Smooth animation on flip.

✅

Key Takeaways

Use perspective on the container to create a 3D space for flipping.

Apply transform-style: preserve-3d on the inner element to maintain 3D children.

Hide the back face with backface-visibility: hidden to avoid overlap.

Rotate the inner card on hover with transform: rotateY(180deg) for the flip effect.

Add transition for smooth flipping animation.