Flip
No library Intermediate
Card rotates 180° on the Y axis on hover to reveal a back face. Uses CSS preserve-3d and backface-visibility for a physical 3D flip.
Front
Hover to flip
✦
Back side
Revealed!
LLM Prompt
Goal: Create a "Flip" card animation.
Visual behavior: The card has a front and a back face. On hover (or click), it rotates 180° on the Y axis to reveal the back side. A smooth cubic-bezier easing makes the flip feel physical.
Technique:
- Outer container: perspective: 800px; fixed width and height
- Inner wrapper: position: relative; width/height: 100%; transform-style: preserve-3d; transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1)
- On hover: transform: rotateY(180deg); on leave: rotateY(0deg)
- Front face: position: absolute; inset: 0; backface-visibility: hidden
- Back face: position: absolute; inset: 0; backface-visibility: hidden; transform: rotateY(180deg)
- Both faces share the same border-radius and overflow: hidden
Accessibility: Under prefers-reduced-motion, skip the 3D rotation and use opacity cross-fade or a simple show/hide instead.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.