← The shelf3D card flip

WBL effects shelf · batch 3 (GSAP) · #02

3D card flip

Service cards turn over in 3D when you tap “See price”: the front says what it is, the back shows the price and the guarantee.

✓ OK to use Not on the never list: only a tap turns a card. Caution: the back is hidden until tapped, so keep the main price visible somewhere else too, and keep both sides short.

Best for: Trades and cleaners with 3-4 flat-price services; salon packages.
How: rotationY 0 → 180 on an inner wrapper, backface-visibility hidden; the hidden face gets inert + aria-hidden. Without JS both sides show, one under the other; with reduced motion the card switches instantly.
Weight: 1.6 KB gzipped (our CSS + JS) + GSAP from jsDelivr: GSAP core 28.3 KB gzipped. Plugins: none (core only).

Scroll ↓
← The shelf