Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationS
■ Note Visually there is little difference between translateZ and scaleZ: they both accomplish the same result,
assuming no other tranforms are applied. otherwise, scale works in the same way as the other properties,
including scale3d.
Card Caption Flip
You can use a combination of these 3D transforms to create several veriations of image captions on the “reverse”
side of gallery images, revealed with mouse hover (Figure 9-7).
Figure 9-7. 3D Flipped image caption gallery
The first example you’ll create will use transitions with images in a standard list. All images are exactly the
same size, with captions coded as span elements after each one, as shown in Listing 9-6.
Listing 9-6. Code for a Simple 3D Gallery
Tulips
Nepatica nobilis
Ekebyhosparken
In this example, each image will flip horizontally on mouseover to show its back or reverse face, as if you
were looking through a transparency of the image from the other side. After a pause, the span content will fade
in over the top of this reversed image (the inline padding is used simply to move the text around inside the span
space). Moving the mouse off the image will reverse this sequence. (See Listing 9-7.)
Listing 9-7. CSS for a Simple 3D Gallery
body { background: #fff; font-family: Avenir, Arial, sans-serif;
font-size: 1.5rem; text-shadow: 3px 3px 2px rgba(0,0,0,0.6); }
ul#gallery { margin-top: 400px; perspective: 1000px; }
ul#gallery li { display: inline-block; margin: 20px; }
ul#gallery li img { width: 320px; height: 244px;
box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
transition: 1s all linear;
}