Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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.
[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