Special/FlipCard
FlipCard
True CSS 3D flip card with front and back faces. Uses preserve-3d and backface-visibility: hidden for a physically accurate flip — not a fade or crossfade.
import { FlipCard } from "@animui/ui"Hover flip
Click flip / vertical
Important: set dimensions
FlipCard is dimension-agnostic — it fills whatever size you give it via className. Always set explicit width and height so both faces know their bounding box.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
front | ReactNode | — | Content for the front face. |
back | ReactNode | — | Content for the back face. |
trigger | "hover" | "click" | "hover" | What triggers the flip. |
direction | "horizontal" | "vertical" | "horizontal" | Axis of the flip rotation. |
duration | number | 0.5 | Flip duration in seconds. |
defaultFlipped | boolean | false | Start in the flipped state. |
onFlip | (flipped: boolean) => void | — | Callback when flip state changes. |
className | string | — | Applied to the outer container — set width and height here. |