Home / Snippets / Animation /

3D flip card

Hover the stage (.anim-3d-demo): the .flip-3d shell rotates 180° on Y so the gradient cover gives way to file details.

Cover

Neon dusk — vector pack 2026

Details

SVG · 24 artboards · CC BY 4.0

Widely Supported

3dflip

Quick implementation

.anim-3d-demo { perspective: 1100px; min-height: 14rem; }
.flip-3d {
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.anim-3d-demo:hover .flip-3d { transform: rotateY(180deg); }
.flip-3d__face--back { transform: rotateY(180deg); }
.flip-3d__face { backface-visibility: hidden; }

Prompt this to your LLM

Media and storefront tiles.

You are building a 3D flip card on the Y axis.

Goal: outer perspective; inner preserve-3d; two faces; back face pre-rotated 180° on Y; hover flips inner.

Constraints:
- Fixed width/height for stable flip.
- prefers-reduced-motion: show back only.

Return HTML + CSS.

Why this matters in 2026

Flips remain a compact pattern for “more info” on catalog tiles without navigating away.

The logic

Y-axis rotation matches left-to-right reading metaphors; pairing with perspective sells the hinge.

Accessibility & performance

Support keyboard focus-within; offer reduced-motion fallback content.