Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationS
$("figure img:nth-child(" + (i) + ")").css('transform','rotateY('+ angle +'deg)');
angle = angle + degreeSep;
}
This would eliminate eight repetitive lines of CSS and produce a far more flexible result: if images were
added to or removed from within the figure, their distribution would be automatically adjusted. A more advanced
version of the script might use basic trigonometry to determine that the size and number of the images and the
origin-z distance were enough to provide acceptable spacing between photographs; if not, the image’s width,
height, and/or origin-z distance could be modified by JavaScript.
Second, you could allow the user to spin the gallery manually by detecting the mouse position inside the figure
element and use its horizontal offset from the center to determine the amount of rotation for the gallery (Listing 9-18).
Listing 9-18. JQuery Code to Rotate a CSS3 Circular Gallery Based on Mouse Position
This would mean removing the CSS3 animation and substituting in a transition, as shown in Listing 9-19.Listing 9-19. CSS Code for JQuery Mouse-Position Rotation of a Circular Gallery
figure { transform-style: preserve-3d; transform-origin-x: 660px;
transform-origin-z: -500px; height: 244px; transition: 2s transform linear; }
figure:hover { cursor: ew-resize; }
■ Note this could also be accomplished to some degree using pure CSS with two elements, each the height of
the figure but half the width, placed left and right over the figure, with a hover pseudo-selector on each driving a
clockwise and counterclockwise animation respectively. there are, however, two significant disadvantages: there
could be no direct interactivity with the gallery underneath (i.e., no pop-up captions), as the two overlaid elements
would capture all mouse events, and 2) using pure CSS would limit the animation to a set speed of rotation in either
direction, as opposed to the further away = faster rotation of the JavaScript solution we looked at previously.
More advanced versions of this JavaScript—and versions more compatible with mobile UI conventions—might
include a script to measure a mouse and/or fingertip drag movement on the screen, rotating the circular gallery a
commensurate number of degrees. You could also add left-right buttons to rotate the gallery in increments.
Adding a CSS Level-4 Selector
Once it is supported by browsers, you could make the gallery more explorative by using the parent selector:
$figure img:nth-child(2):hover { transform: rotateY(−45deg); }
This would rotate the circular gallery as a whole to bring the current hovered image front and center.