Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationSaware that using high values when doing so can produce extreme visual distortion, such as isometric effects.
An individual element with its own perspective has its perspective-origin “buried” inside itself, muting the
effect of most 3D manipulations. Placing the perspective—and by association, the perspective-origin—in the
parent element will usually provide better visual results.
Let’s take a look at these effects visually. Both screenshots in Figure 9-2 share the same basic code shown
in Listing 9-1.
Listing 9-1. HTML and CSS Shared for a Simple 3D-Manipulated Image Gallery
In Figure 9-2, the left-hand screenshot has perspective and perspective-origin applied to the individual
images, while the right-hand screenshot shows the same properties applied to the body. Both examples have the
same rotation applied to the images.
In the image on the left, images are rotated internally unto themselves, showing no change in perspective.
On the left, images are rotated relative to the body perspective, transformed from a consistent vanishing point.
It’s interesting to note that in the second example, the 3D effect is responsive: because the perspective-
origin is on the right side of the body, adjusting the browser window changes the position of the origin and
thus alters the vanishing point for all 3D elements. Widening and narrowing the browser will cause the image
elements to rotate as they remain in alignment with the changing perspective origin.
When placing perspective-origin be extra-aware of the default behaviors in CSS for elements: container
elements with floated child elements having no height, for example, or the body being the height of its content by
default. These aspects can have significant influences when placing the origin and manipulating content in an
implied 3D space.
To demonstrate this, take the HTML code in Listing 9-1, but substitute the CSS in Listing 9-2.
Listing 9-2. CSS Showing Unanticipated Limitations on 3D CSS Perspective
body { perspective: 1200px; perspective-origin: center center; margin: 2rem; }
img { width: 500px; height: 375px; float: left; margin-right: 2rem; margin-bottom: 2rem; }
img { transform: rotateY(45deg); }
The CSS code sets the perspective-origin for the body element to its default value of center for both the X
and Y axes, but as you can see from Figure 9-3, the effect on the images shows that the origin is not at the center
of the document, but at the top.