By default, the back face of an element is a mirror image of its front face. With stacked or overlapping elements, the reverse side is always visible to the viewer, regardless of which side sits at the top of the stack.
Sometimes, however, we don’t want this back side to be visible. Let’s return to the card metaphor mentioned in the introduction to this chapter. This time we’ll use the playing card pictured below.
With any card, we only want one side to be visible to the user at a time. To manage the visibility of an object’s back side, we can use the backface-visibility property.
The initial value of backface-visibiLity is visible . Rear faces will always be shown. But if we want to hide a visible back face, we can use backface-visibiLity: hidden instead.
Let’s create our playing card. First our HTML:
<div class=”card”>
<div class=”side front”>
<div class=,,suit,,>♣</div>
</div>
<div class=”side back”></div>
</div>
In the markup above, we’ve set up front and back sides for a card container. Here’s our card CSS:
.card {
border: 1px solid #ccc;
height: 300px; position: relative;
transition: transform 1s linear;
transform-style: preserve-3d;
width: 240px;
}
The important part to notice here is transform-style: preserve-3d . Again, we’ll need this property to prevent the flattening that occurs by default when we use the transform property. Now let’s set up the CSS for the front and back sides of our cards:
/* Applies to both child div elements */
.side {
height: inherit; left: 0;
position: absolute;
top: 0;
width: inherit;
}
.front {
transform: rotateY(180deg);
}
.back {
background: rgba(204, 204, 204, 0.8);
}
.suit {
line-height: 1;
text-align: center;
font-size: 300px;
}
Both sides are absolutely positioned, so they’ll stack according to their source order. We’ve also flipped the .front sides around the Y-axis by 180 degrees. When it’s all put together, your card should look a bit like the one pictured below.
Both sides of the card are visible at the same time. Let’s revise our CSS slightly. We’ll add backface-visibility: hidden to our .side rule set:
.side {
backface-visibility: hidden;
height: inherit;
left: 0;
position: absolute;
top: 0;
width: inherit;
}
Now, div.front is hidden. If you see a gray box and no club symbol, it’s working as expected.
The utility of backface-visibiLity: hidden becomes a little clearer when we flip div.card . Let’s add a .flipped class to our CSS:
.flipped {
transform: rotateY(180deg);
}
Now when we flip our card over (pictured below), we see div.front , and only div.front .
The image below shows two cards before being flipped. The card on the left has a backface- visibiLity value of hidden , while the one on the right has a value of visible .
And in the next image, we can see these same cards after the flipped class is added—that is, <div cLass=”card fLipped”> .
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.