Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
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