Flip Pricing Card — Free HTML CSS JS 3D Snippet

Pricing cards face a constant tension: marketers want a clean, scannable front with just the plan name, price, and a call to action, but buyers comparing plans want the full feature list. The flip pricing card resolves that tension by putting the headline pricing on the front and the complete feature breakdown on the back, joined by a smooth 3D flip animation. The buyer sees an uncluttered card first, then flips it over when they want detail — all without a modal, a tooltip, or leaving the page. This component is built with pure CSS 3D transforms and a few lines of JavaScript that only toggle a class.

The 3D flip mechanism

The flip relies on three coordinated CSS properties. The outer .fpc-card sets perspective: 1400px, which defines how much depth the 3D scene has — a smaller value exaggerates the perspective, a larger one flattens it. The .fpc-inner wrapper sets transform-style: preserve-3d so its children exist in the same 3D space rather than being flattened, and it carries the transition that animates the rotation. Adding the .flipped class rotates the inner wrapper with transform: rotateY(180deg), swinging it around its vertical axis like a turning page.

Hiding the back of each face

Both faces are stacked on top of each other with position: absolute; inset: 0. The key to a clean flip is backface-visibility: hidden on each face, which makes a face invisible when it is rotated away from the viewer. The front face sits at 0 degrees and the back face is pre-rotated with transform: rotateY(180deg) so that, when the wrapper flips, the back face rotates into the 0-degree viewing position and becomes visible while the front rotates away and disappears. Without backface-visibility: hidden you would see a mirrored, reversed copy of the front through the back.

Why the animation is GPU-accelerated and smooth

Because the flip animates only the transform property — never width, height, top, or left — the browser can hand the entire animation to the GPU compositor. No layout or paint work happens during the 0.7-second transition, so it stays at 60fps even on modest hardware. The timing function cubic-bezier(0.4, 0.2, 0.2, 1) gives the flip a slight ease-in and a soft settle at the end, which reads as more physical than a linear rotation.

The JavaScript: just a class toggle

All the JavaScript does is add or remove the .flipped class on the card in response to the two flip buttons — "See all features" on the front and "Back to pricing" on the back. The animation, the face-hiding, and the perspective all live in CSS, so the script is three lines. This separation means you can trigger the flip from anything: a hover (@media (hover: hover)), a parent toggle, or a framework state change, without touching the visual logic.

Both faces are fully styled cards

Each face is a complete pricing card in its own right — the front has a "Most popular" badge, the plan name, a tagline, a large price with a superscript currency symbol and a /mo period, billing fine print, and a primary CTA pinned to the bottom with margin-top: auto. The back has the plan name, a six-item feature list with green circular checkmark icons, the same CTA, and a button to flip back. Because the CTA appears on both faces, a buyer can convert whether they are looking at the price or the features. The shared #6366f1 accent and the 4px top border tie the two faces together visually.

Customisation

To adapt the card, edit the plan name, price, tagline, and the feature <li> items. Swap the #6366f1 accent (used by the badge, the top border, the CTA, and the flip links) for your brand colour. Change the flip duration by editing the transition on .fpc-inner, and adjust perspective on .fpc-card to make the flip feel deeper or flatter. To build a full pricing table, render three of these cards in a CSS grid and flip them independently — each manages its own .flipped state.