On click, a 3D cube rotates 90 degrees on the X axis to reveal a second face with a confirmation message. Uses CSS transform-style: preserve-3d with two absolutely-positioned faces — a front face (translateZ) and a top face (rotateX + translateZ). Auto-resets after 1.8 seconds.
Create a 3D cube-face button that flips to reveal a second face on click. Structure: - Outer div: perspective: 500px - Inner div: transform-style: preserve-3d, rotates rotateX(90deg) on click - Front face: button, transform: translateZ(24px), backface-visibility: hidden - Top face: div, transform: rotateX(-90deg) translateZ(24px), backface-visibility: hidden On click: rotate the inner div rotateX(90deg) to reveal the top face. Auto-reset after 1.8s. Disable transition under prefers-reduced-motion.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.