Make a Flippable Playing Card with CSS in Five Steps

Step 1: Create the front and back of the card

With some basic html, we’ll first create three divs: a container div with the class “card”, and two inner divs with classes “front” and “back”. Make sure that the .front div appears before the .back div:

 

See the Pen Step 1: Make a Flippable Card In Five Steps by Float Nine (@floatnine) on CodePen.


I’ve given the back card some text and gave it a display type of flex, so I can center the text with align-items and justify-content. Also, both sides of the card have their own background color, and I’ve given each a border-radius of 14px to mimic rounded edges. Finally, I’ve given both .front and .back a fixed width and height.

Step 2: Flip the back side over

See the Pen Step 2: Make a Flippable Card In Five Steps by Float Nine (@floatnine) on CodePen.

In real life, the sides of a playing card are facing away from each other. We can do that by giving .back a declaration of transform: rotateY(180deg).

Step 3: Place the sides on top of each other

See the Pen Step 3: Make a Flippable Card In Five Steps by Float Nine (@floatnine) on CodePen.

 

Giving the back and front sides of the card a position of absolute will place them on top of each other. We then give the .back side a declaration of backface-visibility: hidden. This is so when the .back side is rotated 180 degrees (showing its backface), we only see the .front side. This video shows how this all works:

Step 4: Flip both sides over on hover

See the Pen Step 4: Make a Flippable Card In Five Steps by Float Nine (@floatnine) on CodePen.

Here we’ve added a hover state to .card, and added two declarations of type transform:rotateY to the .front and .back sides. When the card is hovered over, the .front side gets flipped over 180 degrees, and the .back side, which is already flipped over 180 degrees, thanks to step 2, gets flipped back to its original state of 0 degrees.

Step 5: Add a transition to make everything smooth

To really get the feeling of a 3D card being flipped, we need to add the transition property. This allows us to animate transform:rotateY in a smooth manner.

See the Pen Step 5: Make a Flippable Card In Five Steps by Float Nine (@floatnine) on CodePen.

Here, transition: transform 1s ease-in tells the browser to animate the change in transform over 1 second, starting slowly and speeding up at the end.

And that’s it! You can create as many cards on a page as you want with this method, and style them any way you like. So try it out, experiment, and get creative.

Leave a Reply

Your email address will not be published. Required fields are marked *