Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript

6. Adding Depth with 3D Transforms

In Chapter 5, “Creating 3D Effects with Parallax Scrolling,” you used parallax scrolling—moving different layers at different speeds—to create the illusion of depth. This chapter covers how to change the depth of elements through the use of several 3D transform properties. You will explore an important property called perspective, which is crucial to ensuring that the user can properly see the 3D transforms you make. This chapter also covers how to transform in three dimensions by applying rotations to the x-, y-, or z-axis. Finally, you will practice using these properties by creating two examples: a 3D cube and a series of stacked playing cards.

Introduction to 3D Transforms

All the transforms you applied ...