← 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.

Duration
3s
Resolution
1440×900
Format
CSS
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.

profile card flip card - 2.8s cycle · 1.00 intensity
ProfileFront
Backflip-card

Hover/focus flip

Profile Card

The mirrored backside never bleeds through while the card rotates 180 degrees.

Face visibility is assigned per face, while perspective belongs to the outer stage.

  • flip-card
  • backface
  • rotateY
ProductFront
Backfront-back

Back detail face

Product Tile

A product tile flips to reveal details while only one face is visible at a time.

The back face starts at rotateY(180deg) and inherits the card transform.

  • front-back
  • preserve-3d
  • focus-within
SwapFront
Backlow-motion

Reduced depth

Quiet Swap

A quieter card uses less rotation and more opacity for dense interfaces.

The structure stays the same even when the motion is reduced.

  • low-motion
  • card
  • fallback

Flip card inspector

Profile Card

ProfileFront
Backflip-card
Motion contract
Face visibility is assigned per face, while perspective belongs to the outer stage.
Accessibility
The card can expose equivalent text outside the visual flip in production.

Keep the perspective wrapper separate from the card transform wrapper.

css
.flip-card {
  perspective: 900px;
}

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

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

.flip-card__face {
  backface-visibility: hidden;
}