Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic 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.
  • 0:00

    [MUSIC]

  • 0:05

    When you watch a movie in 3D the elements on screen appear to jump

  • 0:09

    out towards you or move away from you, as if they were there in real life.

  • 0:13

    This effect is created by enhancing the illusion of depth perception.

  • 0:18

    The effect adds a third dimension to the otherwise flat two-dimensional

  • 0:22

    movie screen.

  • 0:23

    Computer, tablet, and mobile screens are also flat and two dimensional.

  • 0:27

    But with CSS 3d transforms you can add depth to elements on the page and

  • 0:32

    create movement towards and away from the viewer like in a 3D movie.

  • 0:36

    The transforms you learned in the previous section rotate, scale,

  • 0:41

    skew, and translate elements in two dimensional space.

  • 0:45

    That is, horizontally and vertically on the x and y axis.

  • 0:50

    3D transforms are an extension of 2D transforms.

  • 0:54

    They let you simulate 3D space on a screen by introducing

  • 0:58

    a 3rd axis called the Z axis.

  • 1:01

    The Z axis creates the illusion of depth on a two dimensional screen.

  • 1:06

    On the Z axis you can move elements towards or away from the viewer.

  • 1:10

    Even rotate and scale them within a 3D perspective.

  • 1:13

    You may have already seen 3D transforms on the web.

  • 1:17

    For example Amazon.com uses 3D transforms in some of their product pages.

  • 1:22

    So, on this page, when a user hovers over the book, it partially opens.

  • 1:27

    You can also see the back cover of the book by flipping it,

  • 1:30

    then you can flip it back to the front cover.

  • 1:33

    Here's another impressive example of 3D transforms an action.

  • 1:37

    A 3D book showcase.

  • 1:40

    So at first you see a few colorful books on a shelf.

  • 1:43

    Then once you hover over a book it tilts back towards you.

  • 1:48

    This is all done within a 3D perspective.

  • 1:50

    So if you hover over one of the books in the middle,

  • 1:54

    you only see the back and top areas of the book when it tilts back.

  • 1:59

    But the books that are further away from the middle reveal more

  • 2:02

    depth when they tilt back, just like they would in real life.

  • 2:08

    The 3D effects in these two examples were created using many of the CSS

  • 2:13

    transform concepts you learned in the previous section,

  • 2:17

    like rotation, translation, and scaling.

  • 2:20

    Once you learn how to define 3D space on the page,

  • 2:23

    you can create all sorts of amazing 3D effects using transform properties,

  • 2:28

    like this awesome 3D image slider.

  • 2:34

    So coming up in the next video, you'll get started using 3D transforms by first

  • 2:39

    learning how to activate 3D space on the page

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

Sign up