Home / Snippets / Animation /

Flip reveal

Hover (or focus inside) the preview to flip the tile: the front shows the plan name; the back lists what is included—pure CSS rotateX and backface-visibility.

Team

$29 / seat / month — hover for details.

Includes

SSO, audit log, 99.9% SLA, and shared snippets library.

Widely Supported

3dhover

Quick implementation

.flip-reveal-demo { perspective: 1000px; }
.flip-reveal-card {
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.flip-reveal-demo:hover .flip-reveal-card {
  transform: rotateX(180deg);
}
.flip-reveal-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
}
.flip-reveal-face--back { transform: rotateX(180deg); }

Prompt this to your LLM

Pricing and feature toggles.

You are building a hover flip card (front/back).

Goal: outer perspective; inner preserve-3d; two faces absolutely stacked; back face pre-rotated 180° on X; parent hover rotates inner 180° on X.

Constraints:
- backface-visibility: hidden on faces.
- prefers-reduced-motion: show back only, no flip.

Return HTML + CSS.

Why this matters in 2026

Flips pack twice the information in one footprint—handy for compare tables and onboarding tours.

The logic

Single transition on the shared 3D container keeps both faces synchronized; faces stay painted only when facing the viewer.

Accessibility & performance

Add keyboard focus (focus-within) and a reduced-motion path; avoid flips for critical warnings.