Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: 3D Flip Card Effect

Solution: 3D Flip Card Effect

Let’s create a 3D flip card that reveals its backface on hover using smooth CSS transitions and transforms.

We'll cover the following...

Problem description

Given an HTML page containing a div class card which contains another div class card-inner. The div class card-inner contains two div classes, card-front and card-back.

Write CSS to:

  • Set .card to establish a perspective (e.g., 1000px). ...