This is an interactive flip card. The front is a button that runs a 3D rotation to the back.
The two faces share one transform layer (preserve-3d, hidden backfaces). Opening the card widens it at the same time.
Duration, easing, size, perspective, and transform origin are driven by CSS custom properties. The toolbar updates those values so you can tune motion in real time.
A dimmed scrim, the close control, or the Escape key returns you to the front and restores focus.
Key implementations