Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationS
Note the source order: each image caption comes before the image it references. This is perfectly valid
in HTML5, and will be useful for your CSS animation. You could place the captions after the images, but that
would require changing the z-index value of the captions. The CSS code starts out in a manner similar to the last
example (see Listing 9-9).
Listing 9-9. Basic CSS Code for a More Complex 3D Gallery
body { background: hsl(100,0%,100%); font-family: Avenir, sans-serif; font-size: 1.5rem;
margin-top: 400px; perspective: 1000px; }
figure { margin: 20px; transition: 1s all linear;
box-shadow: 0px 0px 16px rgba(0,0,0,0.3); float: left; }
figure, figure img, figcaption { width: 320px; height: 244px; box-sizing: border-box; }
figure img, figcaption { position: absolute; }
figcaption { background: #fff; text-align: center; padding-top: 6rem; }
figure:hover { transform: rotateY(180deg); }
The image-caption pairs are both exactly the same size, and positioned absolutely. Because the photographs
come after the caption, they are displayed “on top” of the text. However, rotating each figure as a whole at this
stage shows only the reverse side of the image, not the text.
Backface Visibility
Rotating elements around Z and Y axes brings up an interesting question: what happens when you rotate an
element more than 180 degrees? What’s on the other side of an image that had, until this moment, an effective
“thickness” of 0?
Appearance in this state is determined by the backface-visibility property, which has a default value of
visible. This means that when an element flips past 180, what is shown on the other side is the reverse of what’s
seen in the element’s original orientation: images effectively become transparencies, equally visible on both
sides, and text is rendered mirror-imaged. Turning backface-visibility to hidden causes the renderer to ignore the
other side of the element when it rotates past 180 degrees; in most cases, this means less work for the renderer
and, as a result, smoother, cleaner animations.
Transform Style
By default the browser will assume that children of a 3D transformed element take on the 3D transformations
of their parent, but are projected onto the same plane: there is no “before” or “behind” sense for such child
elements. Formally, this would be declared as transform-style: flat applied to the parent element.
If you wish child elements of a 3D-manipulated element to move in the same 3D space as their parents but
be projected onto their own plane, a value of preserve-3d must be applied to the parent element. This allows you
to place one child element behind the other, so that your card can have two visible “sides.”
In this case there is one more addition to make to the code—together these properties will not, by
themselves, be enough to provide the impression of a two-sided card. For the caption to be presented correctly
on the other side of the image, it must be flipped horizontally before any animation takes place. (Think of two
playing cards being placed back to back so that their faces are visible on either side).
Your code changes to what you can see in Listing 9-10.
Listing 9-10. Complete CSS Code for a More Complex 3D Gallery
body { background: hsl(100,0%,100%); font-family: Avenir, sans-serif; font-size: 1.5rem;
margin-top: 400px; perspective: 1000px; }