Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationS
Listing 9-12. HTML Code for a Circular 3D Gallery
You’re going to push these images into a 3D circle by positioning them absolutely, so that they all stack on top
of each other, locating their common transform-origin-z “back” in 3D space and rotating each independently
around the Y axis. As there are eight images, each will be rotated in increments of 45 degrees to create an evenly
distributed circle of photographs (Listing 9-13).
Listing 9-13. Basic CSS Code for a Circular 3D Gallery
div { perspective: 1000px; margin-top: 400px; width: 1400px; }
figure { transform-style: preserve-3d; height: 244px; transform-origin-x: 660px; }
img { width: 320px; height: 244px; position: absolute; left: 500px; }
figure, img { transform-origin-z: -500px; }
div img:nth-child(1) { transform: rotateY(0deg); }
div img:nth-child(2) { transform: rotateY(−45deg); }
div img:nth-child(3) { transform: rotateY(−90deg); }
div img:nth-child(4) { transform: rotateY(−135deg); }
div img:nth-child(5) { transform: rotateY(−180deg); }
div img:nth-child(6) { transform: rotateY(−225deg); }
div img:nth-child(7) { transform: rotateY(−270deg); }
div img:nth-child(8) { transform: rotateY(−315deg); }
Note that altering the height of the figure element changes the Y coordinate of the gallery origin, pitching
the circle of images up and down in 3D space. At half the complete height of the images within it, the circle of
photographs appears to be at “eye level” with the viewer.
Figure 9-10. An animated circular 3D gallery