Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
- Understanding 3D Transforms 2:42
- Activate 3D Space with perspective 6:47
- Create a Flipping Animation with 3D Transform Properties 10:09
- 3-Dimensional Rotations with rotateZ() and rotate3d() 4:47
- Changing the Viewing Position with perspective-origin 4:46
- 3D Transforms Challenge 2 objectives
- Creating a Consistent Depth Perspective 2:39
- Build a Rotating 3D Cube 9:31
- Moving Content with translate3d() 3:44
- Review: 3D Transforms 6 questions

- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
3D transforms are an extension of 2D transforms. They let you simulate 3D space on a screen by introducing a third axis called the Z axis. The Z axis creates the illusion of depth on a two-dimensional screen. On the Z axis, you can move elements towards or away from the viewer, even rotate and scale them within a 3D perspective.
Resources
Video review
- 3D transforms are an extension of 2D transforms.
- 3D transforms let you simulate 3D space on a screen by introducing a third axis called the Z-axis.
- The Z-axis creates the illusion of depth on a two-dimensional screen.
- On the Z-axis, you can move elements towards or away from the viewer, even rotate and scale them within a 3D perspective.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up-
karan Badhwar
Web Development Techdegree Graduate 18,135 Points4 Answers
View all discussions for this video
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up