A wallet card is the visual credit, loyalty, or membership card you see in wallet apps and checkout flows — a glossy front with a chip and number, and a back with a signature strip and barcode. This snippet builds a 3D flippable one in HTML and CSS, with a real card flip and a subtle pointer tilt, in vanilla JavaScript with no dependency. It's a display card (not an input) ideal for wallets, profiles, and fintech UIs.

The 3D flip with preserve-3d

The flip is the core technique. A .wc-inner wrapper has transform-style: preserve-3d inside a perspective container, and the front and back faces are stacked absolutely with backface-visibility: hidden. The back is pre-rotated 180deg, so when a .flipped class rotates the inner wrapper rotateY(180deg), the front turns away (hidden) and the back turns to face you — a true 3D card flip transitioned over 0.7s, not a crossfade.

A realistic card front in pure CSS

The front is a gradient with a soft circular highlight (::after), an EMV chip drawn as a gold gradient box with an inset contact rectangle, a monospace card number with a subtle text-shadow, and the holder/expiry labels. The network logo is the classic two overlapping circles using mix-blend-mode: screen so the overlap brightens like the Mastercard mark — all CSS, no images.

The card back

The back has a black magnetic stripe, a signature panel drawn with a diagonal repeating-linear-gradient (the hatched signature look) plus a CVV box, and a barcode made from a vertical repeating-linear-gradient of thin bars. These patterns recreate the familiar back-of-card details without any assets.

Pointer tilt for depth

When the front is showing, a pointermove handler maps the cursor position to small rotateX/rotateY values, so the card tilts toward the pointer for a premium, tactile feel; it resets on leave and is suppressed while flipped so it doesn't fight the flip transform. Clicking the card (or the button) toggles the flip.

Reusing it

Pass the number, name, expiry, and gradient as data to render any card — a loyalty card, a gift card, a virtual debit card. Keep it as a display component beside a credit card input form so the card updates live as the user types, or show it in a wallet list.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Instead of tracing the 3D transforms by hand, paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the back face needs to be pre-rotated 180 degrees in its resting CSS state before the flip class ever applies, and how that combines with backface-visibility hidden on both faces to make the flip look like a genuine rotation rather than a crossfade. It's also worth asking why the pointermove tilt handler explicitly checks for the flipped class and bails out early, and what visual glitch would appear if that guard were removed. For extending it, have it add a subtle spring/overshoot easing to the flip so it settles rather than stopping abruptly, support rendering multiple cards as a fanned stack that expands on hover, or add a live-preview mode where typing in a linked credit-card-input form updates this card's number and name in real time. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a 3D-flippable wallet/credit card display component in plain HTML, CSS, and vanilla JavaScript with no libraries, no images, and no canvas — every visual detail drawn with CSS gradients and pseudo-elements.

Requirements:
- A card container with CSS perspective set on it, containing an inner wrapper with transform-style: preserve-3d, itself containing two absolutely-positioned faces (front and back) each with backface-visibility: hidden.
- The back face must start pre-rotated 180 degrees in its resting CSS (not rotated dynamically by JavaScript); toggling a single "flipped" class on the inner wrapper must apply rotateY(180deg) to it, which together with the pre-rotation and backface-visibility correctly reveals the back face and hides the front — implement this as a genuine 3D rotation with a smooth transition duration, not a crossfade or opacity swap.
- The front face must include: a brand wordmark and network label, a chip drawn as a gradient box with an inset border rectangle (no image), a monospaced card number, and a card-holder name plus expiry date row, with a two-circle network logo mark using mix-blend-mode to brighten the overlapping region the way real card network logos do.
- The back face must include: a solid dark magnetic-stripe bar, a signature panel drawn with a diagonal repeating-linear-gradient hatch pattern plus a small CVV box, and a barcode pattern built from a repeating-linear-gradient of thin vertical bars — no images or SVGs for any of these.
- Clicking anywhere on the card (or a separate explicit "Flip" button, with its click event not bubbling up to also trigger the card's own handler) must toggle the flipped state.
- While the front face is showing (not flipped), a pointermove handler over the card must compute small rotateX/rotateY values from the pointer's position relative to the card's bounding box and apply them as a live tilt transform on the inner wrapper for a parallax/depth effect; this tilt must be explicitly suppressed while the card is flipped so it never fights the flip's own rotateY transform, and must reset to no transform on pointer leave.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA 3D wallet card renders showing its front.
2
Click the cardIt flips in 3D to reveal the signature strip and barcode.
3
Move your pointerThe front tilts toward the cursor for depth.
4
Flip backClick again or use the button to return to the front.
5
Recolor itChange the front gradient for your own brand.
6
Bind dataRender the number, name, and expiry from props.

Real-world uses

Common Use Cases

Wallet and banking apps

Show cards beside a phone mockup wallet.

Checkout previews

Mirror a credit card input live as users type.

Loyalty and membership

Display points alongside a loyalty points widget.

Gift cards

Reuse the flip for a gift card design.

Fintech landing pages

Feature a card next to a product hero.

Learning 3D transforms

A reference for preserve-3d card flips and tilt.

Got questions?

Frequently Asked Questions

The inner wrapper has transform-style: preserve-3d inside a perspective container, and the two faces are stacked with backface-visibility: hidden. The back is pre-rotated 180 degrees, so rotating the wrapper rotateY(180deg) via a flipped class turns the front away (hidden) and brings the back forward. It's a genuine 3D rotation transitioned over 0.7 seconds, not a fade.

No, it's entirely CSS. The chip is a gold gradient box with an inset contact rectangle, the network logo is two overlapping circles using mix-blend-mode: screen, the signature strip is a diagonal repeating-linear-gradient, and the barcode is a vertical one. Building it from CSS keeps it crisp and recolorable with no assets.

The pointermove handler checks for the flipped class and returns early if it's present, because applying a tilt transform to the inner wrapper would override the rotateY(180deg) flip and break it. Limiting tilt to the front-facing state keeps the flip animation clean while still adding depth when the front is shown.

Yes. The number, holder name, expiry, CVV, and the front gradient are all just markup, so render them from props or state. Pair it with a card-input form and update the display as the user types for the live-preview pattern, or map a list of cards to a wallet stack.

Make it a component with a flipped boolean in state toggled on click, bound to the flipped class. Render the card details from props. Put the pointer tilt in an event handler that sets an inline transform, guarded by the flipped state, and reset it on pointer leave. In Tailwind, use perspective and rotate-y utilities (or a small style block) with backface-hidden on the faces.

Loading…