Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Transitions and Transforms

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Understanding 3D Transforms

2:42 with Guil Hernandez

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

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    When you watch a movie in 3D the elements on screen appear to jump 0:05
    out towards you or move away from you, as if they were there in real life. 0:09
    This effect is created by enhancing the illusion of depth perception. 0:13
    The effect adds a third dimension to the otherwise flat two-dimensional 0:18
    movie screen. 0:22
    Computer, tablet, and mobile screens are also flat and two dimensional. 0:23
    But with CSS 3d transforms you can add depth to elements on the page and 0:27
    create movement towards and away from the viewer like in a 3D movie. 0:32
    The transforms you learned in the previous section rotate, scale, 0:36
    skew, and translate elements in two dimensional space. 0:41
    That is, horizontally and vertically on the x and y axis. 0:45
    3D transforms are an extension of 2D transforms. 0:50
    They let you simulate 3D space on a screen by introducing 0:54
    a 3rd axis called the Z axis. 0:58
    The Z axis creates the illusion of depth on a two dimensional screen. 1:01
    On the Z axis you can move elements towards or away from the viewer. 1:06
    Even rotate and scale them within a 3D perspective. 1:10
    You may have already seen 3D transforms on the web. 1:13
    For example Amazon.com uses 3D transforms in some of their product pages. 1:17
    So, on this page, when a user hovers over the book, it partially opens. 1:22
    You can also see the back cover of the book by flipping it, 1:27
    then you can flip it back to the front cover. 1:30
    Here's another impressive example of 3D transforms an action. 1:33
    A 3D book showcase. 1:37
    So at first you see a few colorful books on a shelf. 1:40
    Then once you hover over a book it tilts back towards you. 1:43
    This is all done within a 3D perspective. 1:48
    So if you hover over one of the books in the middle, 1:50
    you only see the back and top areas of the book when it tilts back. 1:54
    But the books that are further away from the middle reveal more 1:59
    depth when they tilt back, just like they would in real life. 2:02
    The 3D effects in these two examples were created using many of the CSS 2:08
    transform concepts you learned in the previous section, 2:13
    like rotation, translation, and scaling. 2:17
    Once you learn how to define 3D space on the page, 2:20
    you can create all sorts of amazing 3D effects using transform properties, 2:23
    like this awesome 3D image slider. 2:28
    So coming up in the next video, you'll get started using 3D transforms by first 2:34
    learning how to activate 3D space on the page 2:39

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up