Flip cards add a touch of interactivity to any page — profile cards, product spotlights, flashcards, and game stats all use this pattern. When you hover over the card, it rotates to reveal content on the back.
In this challenge, you will build a 3D Flip Card that rotates 180 degrees along the Y-axis on hover. The front face shows one side, and when flipped, the back face is revealed.
Use CSS transform-style: preserve-3d on the inner wrapper and backface-visibility: hidden on both sides. Trigger the flip with :hover and a smooth transition.
