06-transforms/backface-visibility-card.html (excerpt)
<div class="card">
<div class="side front">
<div class="suit">♣</div>
</div>
<div class="side back"></div>
</div>Inthismarkup,we’vesetupfrontandbacksidesforacardcontainer.Here’sour
cardCSS:^14
css/chapter6/backface-vis.css (excerpt)
.card {
border: 1px solid #ccc;
height: 300px;
position: relative;
transition: transform 1s linear;
transform-style: preserve-3d;
width: 240px;
}Theimportantparttonoticehereistransform-style: preserve-3d.Again,we’ll
needthispropertytopreventtheflatteningthatoccursbydefaultwhenweusethe
transformproperty.Nowlet’ssetuptheCSSforthefrontandbacksidesofour
cards:
css/chapter6/backface-vis.css (excerpt)
/* Applies to both child div elements */
.side {
height: inherit;
left: 0;
position: absolute;
top: 0;
width: inherit;
}.front {(^14) Forbroadestbrowsercompatibility,makesurethatyouincludeprefixedversionsoftransition
andtransform-style.
CSS Transforms 271