CSS interaction demo

Build a 3D flip card with CSS

Hover over a card with a mouse, move keyboard focus to its reveal control, or activate the summary on a touch screen. The card uses CSS perspective and a 3D rotation—no JavaScript required.

Mountain peaks reflected in a calm alpine lake

Plan the view

Put the image on the front and a short, useful description on the reverse. Keep both sides in the HTML so search engines and assistive technology can read the content.

HTML + CSS
Sunlit green mountain landscape

Make it responsive

The grid adjusts to its available width. The card keeps a readable minimum height, while the faces stay aligned and preserve their rounded corners.

Responsive layout