Card Deck I introduces the fundamental card flip interaction. A user clicks a card and it flips 180° to reveal its back face. This tests CSS 3D transforms, backface-visibility, and controlled React state. It is the foundation for flashcard and memory-game UIs.
Build a single FlipCard component that shows a front face and a back face. On click, it animates a smooth 3D flip along the Y-axis. The card must stay flipped until clicked again (toggle behaviour).
The CSS challenge is that both faces must occupy the same space and only one is visible at a time. The trick is backface-visibility: hidden plus rotating the back face 180° initially so it starts hidden.