Flip
No library Beginner
A checkbox that performs a full 360° Y-axis coin flip via CSS keyframes when toggled. The fill color and stroke-dashoffset check mark transition during the rotation.
A checkbox that performs a full 360° Y-axis coin flip via CSS keyframes when toggled. The fill color and stroke-dashoffset check mark transition during the rotation.
Goal: Create a "Flip" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: indigo (#6366f1) fill and border. When toggled, the box performs a full 360° Y-axis rotation (coin flip) via CSS keyframes with perspective. Fill color and check mark draw-in transition happen simultaneously during the flip.
Technique: React useState tracks checked state. A separate animKey state triggers a component key change to restart the CSS animation on every toggle. A single @keyframes cb-flip (perspective rotateY 0→360deg) injected once via useEffect. The check mark uses stroke-dashoffset to draw in after the flip completes.
Accessibility: Hidden native <input type="checkbox">. Animation skipped under prefers-reduced-motion.
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.