issuhub.com

Pro CSS3 Animation

(Tuis.) #1 
Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationS


Tulips
Tulips



Nepatica-nobilis
Nepatica nobilis



Sunset
Sunset



Ekebyhosparken
Ekebyhosparken





You can see a still of the result in Figure 9-12.

Figure 9-12. A circular 3D gallery with popup captions


Enhancing the Gallery with Level-4 Selectors and JavaScript


There are many ways to enhance the gallery you’ve created with JavaScript. The obvious and primary way is
to take care of the initial rotation of the images with scripting rather than doing so by hand. (For the sake of
simplicity, I’ll assume that you have returned to the basic markup of the gallery shown in Listing 9-17).


Listing 9-17. JQuery Code to Automatically Distribute Images in a CSS3 Circular Gallery