Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationStransform: rotateX(30deg) translateY(−200px); }
Blue Harvest
The waves of grain moved like the surface of the ocean under the light of the moon, stirred
faintly by a susurrus of wind from the east. Caleb hoisted the worn wooden shaft of a scythe
over his shoulder and peered out into the darkness, dirt-grimed thumbnail scratching under the
brim of his straw hat, just above the sun-seared terminator of skin.
Naturally, this could also easily be animated (Listing 9-5).Listing 9-5. CSS for an Animated Opening Credit Crawl
@keyframes crawl {
100% { transform: rotateX(40deg) translateY(−2000px); }
}
div#crawl { transform: rotateX(40deg) translateY(1000px); animation: crawl 30s linear; }
This creates the result you see in Figure 9-6.You can also employ translate3d in the same way the rotate3d property was used previously.Figure 9-6. Still from an animated credit crawl created with CSS3