Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationSul#gallery li:hover img { transform: rotateY(180deg); }
ul#gallery li span { position: absolute; width: 320px; height: 244px;
margin-left: -320px; color: #fff; opacity: 0; background: rgba(0,0,0,0.8); display:
inline-block;
box-sizing: border-box; padding-top: 6rem; padding-left: 8rem; }
ul#gallery li:hover span { opacity: 1; transition: 1s 1s opacity linear; }
The span element uses the transition-duration value to come in immediately after the spin has
completed. Each spin is around the image’s own center; if you wanted to introduce a little more variability, you
could change the transition-origin for each element.
As an experiment, leave the span elements visible and untransitioned in your CSS; you’ll see that the
spinning images rotate through the caption text, an effect that you’ll have the opportunity to use later. Rather like
z-index, untransformed content is assumed to exist at a “base layer” of presentation that 3D-projected content
can slice through, depending on its position and perspective.
It’s also worthwhile to note that the image’s box-shadow is not shown as being thrown on the white page of
your body content; rather, the shadow rotates as part of the image, surrounding it. While it is possible in theory
to manipulate a separate “shadow” div to provide the impression that it is projected, this takes considerable
extra effort.
As a whole, the gallery works well, but visitors seeing the “other side” of the image may be confused.
(See Figure 9-8.) Providing the impression that your images are actual cards with a plain reverse side that holds a
caption, with all of these elements moving together, requires a little more work.
Figure 9-8. 3D flipped image caption gallery with solid reverse side
First, you’ll change the markup to provide a page variation with more semantic value, shown in Listing 9-8.Listing 9-8. Code for a More Complex 3D Gallery
