Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationSAlso note that you could use JavaScript to automate the distribution of the images—which you’ll do in the
next section.
There are two paths you could take to rotate the gallery on hover. One is to increase the rotateY value of
each individual image by the same amount: an overly complex approach without resorting to scripting. As you
can see, you’ve already set the images and the figure that surrounds them to have the same z origin, so your
second option is to animate the figure itself (Listing 9-14).
Listing 9-14. CSS Animation Code for a Circular 3D Gallery
@keyframes spin { 100% { transform: rotateY(360deg); } }
figure:hover { animation: spin 12s linear infinite; }
While the 3D and animation effects work well, the gallery is lacking one other aspect of realism: in real life,
distant objects are not just smaller, they are also dimmer. Hiding the backfaces of the images won’t work: that will
make the images disappear, not fade, and adding spans behind each image, per the solution for the first gallery,
is too much extra markup. Neither does the blur filter work on the pixel values of 3d-transformed images, at least
not as of this writing.
There are a few possible ways of achieving the effect: the fourth and sixth images that can be seen at the
“back” of the gallery circle could be dynamically set with opacity and made solid as they come to the forefront.
Alternatively, a box-shadow applied equally to all sides of each image with no blur could be applied
(Listing 9-15).
Listing 9-15. CSS Shading Effect for a Circular 3D Gallery
img { box-shadow: 0px 0px 0px 48px rgba(0,0,0,0.8); }
The limitation of this approach is that the background-color of the figure containing div or the body itself
must be solid black; anything lighter will show the edges of the shadows. (See Figure 9-11).
Figure 9-11. A Circular 3D Gallery with Shading Effects
As each image remains effectively independent as its own element, you could combine the caption
techniques explored in Chapter 3 with the photographs in the circular gallery, albeit with some changes to the
markup (see Listing 9-16).