HTML and CSS Reference
Objective complete - mini debriefing
We have created a 3D card-flipping effect. Let's discuss how we built this effect.
Transform applies posiion movement, rotaion, and scaling to the elements. Moreover,
it can transform in either a 2D or 3D space. The element is sill 2D but it is put into a 3D
space using the z-axis, as shown in the following figure:
The card-flipping effect
The DOM element is always a 2D pane with only one face. In reality, a card contains two
faces—the front and back. So, in HTML, we create two faces inside each card element. We
overlap them together and use the rotaion transform to create the back and front faces.
The back face visibility is a key property to make the effect work. It hides the back face
visibility when it is rotated to the back; or else, the rotated back face will sill be there.