3D Card Flip
Card flips to reveal a back side with a smooth 3D rotation.
Adjust the preview
Every choice updates the preview and the wording below.
Flip Axis
Front Content
Back Content
Trigger
Your prompt
Highlighted values follow your choices — click one to write your own.
Create a 3D card flip component that rotates horizontally (Y-axis) to reveal a back side. The front shows an icon and title and the back shows a detailed description. Use CSS perspective, backface-visibility, and rotateX/Y transforms. Trigger the flip on hover. Add a smooth transition.
Paste it into Claude, Cursor, or v0 along with the context for your project.