Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationS
To get the perspective on the images correct, you must make the body element at least as high as the content
it contains. In this case, you’ll use the standard min-height: 100% on the html and height: 100% on the body
approach , which you can see in Listing 9-3. Once the CSS3 value is supported in browsers, you will be able to use
min-height: contain-floats on the body element alone.
Listing 9-3. CSS 3D Perspective Corrected for Body Height
html { height: 100%; }
body { perspective: 1200px; perspective-origin: center center; margin: 2rem;
margin-top: 8rem; min-height: 100%; }
img { width: 500px; height: 375px; float: left; margin-right: 2rem; margin-bottom: 2rem; }
img { transform: rotateY(45deg); }
The change to the CSS provides the correct transforms to the images, as you can see in Figure 9-4.Figure 9-3. Incorrect orientation of images due to misaligned perspective origin