Chapter 3 ■ CSS3 tranSitionS for imageS
42
The code in Listing 3-22 will produce the image shown in Figure 3 - 6.Figure 3-6. Stacked images rotated with CSS transforms around their respective centers
As you can see, the image rotates around its center. In this case, you want the images to be slightly fanned,
so you’ll need to move the axis of transformation below the images (see Listing 3-23).
Listing 3-23. Offsetting the Transform Origin for Images
#cardfan img { border: 32px solid #ffe;
box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);
position: absolute;
transform-origin: center 600px;
}
The code in Listing 3-23 will produce the output shown in Figure 3 - 7.