Here’sthecounterintuitivepart:transformandperspectivealsotriggerthisflat-
teningwhentheirvalueissomethingotherthannone.Ineffect,thismeansthat
childelementsstackaccordingtotheirsourceorderiftheyhavethesameZ-index
value,regardlessofthetransformapplied.Considerthefollowingsource:<div class="wrapper">
<figure>a</figure>
<figure>f</figure>
</div>AndthefollowingCSS:.wrapper {
perspective: 2000px;
perspective-origin: 50% -200px;
}
.wrapper figure {
position: absolute;
top: 0;
width: 200px;
height: 200px;
}
.wrapper figure:first-child {
transform: rotateY(60deg) translateZ(191px);
background: #3f51b5;
}
.wrapper figure:nth-child(2) {
transform: rotateY(120deg) translateZ(191px);
background: #8bc34a;
}Inthisexample,sincewe’veappliedperspective: 1000pxto.wrapper,ourfigure
elementswillbeflattened.Sincebothelementsalsohavethesamecalculatedz-
index,.wrapper figure:nth-child(2)willbethetopmostelementinthestack,
aswitnessedinFigure6.41.Notethat.wrapper figure:first-childisstillvisible.
It’sjustnotthetopmostelement.Herethecomputedvalueoftransform-style
willbeflat.266 CSS Master