← Back to gallery
CSSFeatured

Flip Card Front/Back Face Handling

A CSS 3D flip card pattern where front and back faces share one plane, hide their backfaces, and expose focus-safe fallback behavior.

flip-cardbackface-visibilitypreserve-3drotateYfocus-within

CSS 3D / Backface Visibility

3D Flip Card Front/Back Face Handling

Front and back faces occupy the same plane, use backface-visibility: hidden, and flip with a focus-safe reduced-motion fallback.

Y-axis rotation

Profile Card

Standard horizontal flip (rotateY). The mirrored back never bleeds through while the card rotates 180°. Keep the perspective wrapper separate from the card transform wrapper.

  • rotateY
  • backface
  • flip-card

X-axis rotation

Product Tile

Vertical flip (rotateX) for top-to-bottom card reveal. Same backface mechanics as a Y-flip — only the rotation axis changes, demonstrating that the technique is axis-agnostic.

  • rotateX
  • preserve-3d
  • axis-flip

Opacity crossfade

Quiet Swap

No rotation — faces crossfade via opacity for dense interfaces and reduced-motion users. Same DOM structure, gentler motion. The proper reduced-motion fallback pattern.

  • opacity
  • low-motion
  • fallback

Flip card inspector

Profile Card

  • rotateY
  • backface
  • flip-card

Standard horizontal flip (rotateY). The mirrored back never bleeds through while the card rotates 180°. Keep the perspective wrapper separate from the card transform wrapper.

.flip-card {
  perspective: 720px;
}

.flip-card__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 4.40s ease;
}

.flip-card:hover .flip-card__inner,
.flip-card:focus-within .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform: translateZ(0.01px);
}

.flip-card__face--back {
  transform: rotateY(180deg) translateZ(0.01px);
}

@media (prefers-reduced-motion: reduce) {
  .flip-card__inner { transition-duration: 1ms; }
}