Bothsidesofthecardarevisibleatthesametime.Let’sreviseourCSSslightly.
We’lladdbackface-visibility: hiddentoour.sideruleset:
.side {
backface-visibility: hidden;
height: inherit;
left: 0;
position: absolute;
top: 0;
width: inherit;
}Now,div.frontishidden.Ifyouseeagrayboxandnoclubsymbol,it’sworking
asexpected.
Theutilityofbackface-visibility: hiddenbecomesalittleclearerwhenweflip
div.card.Let’sadda.flippedclasstoourCSS:
.flipped {
transform: rotateY(180deg);
}Nowwhenweflipourcardover(inFigure6.45),weseediv.front,andonly
div.front.
CSS Transforms 273