motion-flip-card
Two-sided card that flips between a front and back slot with spring physics. Trigger on hover or click; choose the rotation axis.
Preview — Hover, Y axis
Hover
Hello!
Preview — Click, X axis
Click me
Bouncier
Import
Usage
Sizing
The host is inline-block by default. Give it an explicit width and height (or set display: block) — both faces fill the host.
Programmatic flip
Call flip() on the element to toggle from script:
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | "hover" | "click" | "hover" | What flips the card |
| | | "y" | "x" | "y" | Rotation axis: y (around vertical) or x (around horizontal) |
| | | number | 0.7 | Spring duration of the flip, in seconds |
| | | number | 0.2 | Spring bounciness (0 = critically damped, higher = more elastic) |
| | | number | 1000 | CSS perspective applied to the host, in pixels |
Slots
| Slot | Type | Default | Description |
|---|---|---|---|
| | element | — | The face shown at rest |
| | element | — | The face revealed after flipping |
Methods
| Method | Description |
|---|---|
flip() | Toggles the card between front and back. |
Accessibility
When trigger="click" the host is given role="button", tabindex="0", and responds to Space / Enter.
Both faces stay in the DOM at all times — the back face is rotated 180° and hidden via backface-visibility, so screen readers can still find its content.