Pro CSS3 Animation

Chapter 3 ■ CSS3 tranSitionS for imageS

43

Now you can truly fan the cards out, applying a transition at the same time, as shown in Listing 3-24.
(Note that I’ve altered some values to increase the fan effect.)

Listing 3-24. Full CSS for an Animated Card Fan Gallery

#cardfan, #cardfan img { width: 640px; height: 480px;
transition: .6s transform ease-out;
}
#cardfan { margin: 0 auto; }
#cardfan img { border: 32px solid #ffe;
box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);
position: absolute;
transform-origin: center 1200px;
}
div#cardfan:hover img:first-child {
transform: rotate(24deg);
}
div#cardfan:hover img:last-child {
transform: rotate(−24deg);
}

You could also link the images to a gallery page, as shown in Listing 3-25.

Figure 3-7. Stacked images rotated around an offset origin, highlighted with crosshairs

n