3D Card Flip Effect with CSS Transform

3D Card Flip with rotateY

The 3D card flip is one of the most popular CSS transform effects. It uses rotateY(180deg) with perspective to create a realistic card-turning animation.

The CSS

.card-container {
  perspective: 800px;
  width: 300px;
  height: 200px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

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

.card-front,
.card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

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

Key Properties

Property	Purpose
perspective	Creates 3D depth on the container
transform-style: preserve-3d	Allows children to exist in 3D space
backface-visibility: hidden	Hides the back of each face
rotateY(180deg)	Flips the card around the vertical axis

Perspective Value

• 600-1000px: Natural-looking flip suitable for most cards.
• Below 400px: Extreme perspective, very dramatic.
• Above 1500px: Almost flat, minimal 3D effect.

Flip Direction

Replace rotateY with rotateX for a top-to-bottom flip, or combine both axes for a diagonal flip effect.