Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationSfigure { margin: 20px; transition: 1s all linear;
box-shadow: 0px 0px 16px rgba(0,0,0,0.3); float: left;
transform-style: preserve-3d; }
figure, figure img, figcaption { width: 320px; height: 244px; box-sizing: border-box; }
figure img, figcaption { position: absolute; backface-visibility: hidden; }
figcaption { background: #fff; text-align: center; padding-top: 6rem;
transform: rotateY(180deg); }
figure:hover { transform: rotateY(180deg); }
There’s one more variation to consider: what if you want the other side of the photograph to be faintly visible
through the caption? Turning off backface-visibility: hidden will not be enough to create this effect by itself.
You will need to position each element in 3D space with a little more precision (see Listing 9-11).
Listing 9-11. Alternate 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; }
figure { margin: 20px; transition: 1s all linear;
transform-style: preserve-3d; 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;
transform: rotateY(180deg) translateZ(1px); opacity: 0.9;
}
figure:hover { transform: rotateY(180deg); }
The very slight translation of the caption along the z-axis is enough to place the caption “behind” the image
in such a way that the reversed aspect of the photograph underneath it can be seen, as shown in Figure 9-9.
Figure 9-9. 3D flipped image caption gallery with partially transparent reverse side
A Circular 3D Gallery
You can take all of the photographs used so far and transform them into a fully circular 3D gallery that rotates on
hover (Figure 9-10). The markup, shown in Listing 9-12, is very straightforward.