Flip Card

Create a 3D flip card. Structure: an outer wrapper with perspective: 700px; inside it, an inner container with transform-style: preserve-3d holding two absolutely positioned faces (inset: 0). The back face is pre-rotated with transform: rotateY(180deg). Both faces set backface-visibility: hidden (with -webkit- prefix) so only the facing side is visible. Interaction: on hover, rotate the inner container to rotateY(180deg) with a 550ms transition using cubic-bezier(0.22, 1, 0.36, 1). On touch devices, flip on tap instead (toggle on click). Make the front and back visually distinct, e.g. light front, dark ink back. Both faces must be the same size with the same border-radius, and content on the back must be readable (it is pre-flipped, so it renders correctly). If prefers-reduced-motion is enabled, swap the faces instantly with no 3D rotation. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.