Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Understanding 3D Transforms2: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.
- 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.
When you watch a movie in 3D the elements on screen appear to jump
out towards you or move away from you, as if they were there in real life.
This effect is created by enhancing the illusion of depth perception.
The effect adds a third dimension to the otherwise flat two-dimensional
Computer, tablet, and mobile screens are also flat and two dimensional.
But with CSS 3d transforms you can add depth to elements on the page and
create movement towards and away from the viewer like in a 3D movie.
The transforms you learned in the previous section rotate, scale,
skew, and translate elements in two dimensional space.
That is, horizontally and vertically on the x and y axis.
3D transforms are an extension of 2D transforms.
They let you simulate 3D space on a screen by introducing
a 3rd 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.
You may have already seen 3D transforms on the web.
For example Amazon.com uses 3D transforms in some of their product pages.
So, on this page, when a user hovers over the book, it partially opens.
You can also see the back cover of the book by flipping it,
then you can flip it back to the front cover.
Here's another impressive example of 3D transforms an action.
A 3D book showcase.
So at first you see a few colorful books on a shelf.
Then once you hover over a book it tilts back towards you.
This is all done within a 3D perspective.
So if you hover over one of the books in the middle,
you only see the back and top areas of the book when it tilts back.
But the books that are further away from the middle reveal more
depth when they tilt back, just like they would in real life.
The 3D effects in these two examples were created using many of the CSS
transform concepts you learned in the previous section,
like rotation, translation, and scaling.
Once you learn how to define 3D space on the page,
you can create all sorts of amazing 3D effects using transform properties,
like this awesome 3D image slider.
So coming up in the next video, you'll get started using 3D transforms by first
learning how to activate 3D space on the page
You need to sign up for Treehouse in order to download course files.Sign up