# 3D Card Flip Gallery
> Tactile 3D cards with deep perspective, reactive edge-light, shadow inversion, hover/focus parity, and tap auto-close.
Canonical: https://gsapvault.com/effects/3d-card-flip
Live demo: https://gsapvault.com/demos/3d-card-flip/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | free |
| Price | Free |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | 3d-transforms, hover-effect, click-toggle, stagger, scroll-reveal, matchMedia |
| Uses Lenis | No |
## Overview
A premium 3D card flip effect that turns portfolio, team, or product cards into tactile two-sided objects. GSAP coordinates the deep rotateY movement with edge-light, face illumination, scale, and directional shadow changes while surrounding cards subtly yield.
## Features
- Deep perspective flip with exact 0° and 180° resting states
- Layered front and back faces with reactive directional lighting
- Independent edge-light and shadow inversion during rotation
- Hover, focus, tap, and programmatic class-based controls
- Auto-close groups that keep touch layouts controlled
- Subtle neighbouring-card scale and position response
- Optional staggered ScrollTrigger entrance via a data attribute
- Reduced-motion instant switching and full keyboard support
## Use Cases
- Creative rosters with project dossiers
- Portfolio cards with concise case-study details
- Team profiles with role and biography reveals
- Product cards with specifications on the reverse
- Editorial collections with tactile browsing
## Vibe-Code Ready Setup
This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.
[How AI-assisted setup works](https://gsapvault.com/vibe-coding)
## How It Works
Each card holds two absolutely positioned faces inside a preserve-3d wrapper. GSAP drives rotateY between exact front and back states using a confident power4.inOut ease, while separate tweens invert the shadow, sweep the face lighting, brighten the card edge, and ask neighbouring cards to yield. Data attributes select hover or click behavior, enable grouped auto-close, and opt a container into a staggered ScrollTrigger entrance.
## Documentation
A tactile, accessible two-sided card effect with deep perspective, directional face light, edge glow, shadow inversion, and a restrained response from neighbouring cards.
## Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add a card to your HTML ``:**
```html
```
**3. Add before the closing `` tag:**
```html
```
## Options
| Attribute / class | Values | Default | Description |
|---|---|---|---|
| `data-flip` | `hover`, `click` | `hover` | Hover/focus on fine pointers, or click/tap toggling. Hover cards automatically use tap on coarse pointers. |
| `data-flip-group` | `auto-close` | none | Put on a shared ancestor to close other open cards when one opens. |
| `data-flip-stagger` | present | absent | Adds the optional staggered ScrollTrigger entrance to cards inside the container. |
| `.flipped` | present / absent | absent | Public state class for programmatic control. |
| `--card-accent` | any CSS color | cyan | Per-card face, edge, and focus color. |
## Trigger Examples
### Hover, focus, and touch fallback
**Add to your HTML ``:**
```html
```
A fine pointer opens this card on hover and keyboard focus. On a coarse pointer, tapping toggles it.
### Click/tap toggle
**Add to your HTML ``:**
```html
```
Click, Enter, or Space toggles this card on every device.
### Auto-close roster with entrance
**Add to your HTML ``:**
```html
```
## Programmatic API
The `.flipped` class remains the public state API. A `MutationObserver` synchronizes class changes with the full GSAP lighting, shadow, and grid response.
**Add to your JavaScript:**
```javascript
const card = document.querySelector('.flip-card');
card.classList.add('flipped'); // open
card.classList.remove('flipped'); // close
card.classList.toggle('flipped'); // toggle
```
Pressing Escape closes every card initialized by the effect. The script also keeps `aria-pressed` synchronized with the open state.
## Customization
**Add to your stylesheet after `style.css`:**
```css
.flip-card {
--card-accent: #c7f36b;
max-width: 320px;
aspect-ratio: 0.76;
}
.roster {
perspective: 1800px;
}
```
The core classes are `.flip-card`, `.flip-card-inner`, `.flip-card-front`, and `.flip-card-back`. `.card-edge`, `.card-shadow`, and each `.face-light` provide the layered secondary response and should be retained for the complete effect.
## Accessibility
- Use a semantic `