O'Reilly logo

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

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required