A circular gold coin button that spins 720° on click using 3D rotateY. Uses transform-style: preserve-3d with two absolutely-positioned faces (front "$", back "★") each with backface-visibility: hidden, so the coin shows its back face mid-spin before returning to front. No dependencies.
Goal: Create a "Coin Flip" button animation.
Visual behavior: A circular gold coin button. On click, it spins 720° on the Y axis (two full rotations), briefly revealing its back face (showing "★") mid-spin before returning to the front face (showing "$"). The coin has a radial gradient simulating a gold surface with a specular highlight. Clicking again while spinning does nothing.
Technique: Use a wrapper <button> with perspective: 500px and no background/border. Inside, a <div> with transform-style: preserve-3d. Two absolutely-positioned child divs: the front face (backface-visibility: hidden, normal orientation) and the back face (transform: rotateY(180deg), backface-visibility: hidden). On click, use the removeAttribute/offsetWidth/setAttribute pattern to re-trigger a CSS @keyframes btn-coin-spin animation (0% rotateY(0deg) → 100% rotateY(720deg)) on the inner div. A flipping state prevents double-fire. Clear the data attribute and state after 720ms.
Accessibility: Animation disabled under prefers-reduced-motion. The button still responds to click without spinning.
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.