Pro CSS3 Animation

Chapter 3 ■ CSS3 tranSitionS for imageS

Again, you will use images of the same size to produce the best results, as shown in Listing 3-20.

Listing 3-20. HTML for an Animated Image Card Fan Effect

You’ve wrapped the images in a container element to make them easier to reference and control via CSS.
The div and the images it contains are the same size. You’ll also center-align the container to the page while
styling and stacking the images inside (see Listing 3-21).

Listing 3-21. Basic CSS for a Card Fan Effect

#cardfan, #cardfan img { width: 640px; height: 480px; }
#cardfan { margin: 0 auto; }
#cardfan img { border: 32px solid #ffe;
box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);
position: absolute; }

You want to have the images fan out when the user hovers over them; you can achieve this by rotating
the first and last images in the stack by 12 degrees through the use of the :first-child and :last-child
pseudo-classes, as shown in Listing 3-22.

Listing 3-22. Rotation of the First and Last Images in a Card Stack Effect

#cardfan:hover img:first-child {
transform: rotate(12deg);
}
#cardfan:hover img:last-child {
transform: rotate(−12deg);
}

Figure 3-5. An animated card fan effect