- Understanding 3D Transforms 2:42
- Activate 3D Space with perspective 6:47
- Create a Flipping Animation with 3D Transform Properties 10:09
- 3-Dimensional Rotations with rotateZ() and rotate3d() 4:47
- Changing the Viewing Position with perspective-origin 4:46
- 3D Transforms Challenge 2 objectives
- Creating a Consistent Depth Perspective 2:39
- Build a Rotating 3D Cube 9:31
- Moving Content with translate3d() 3:44
- Review: 3D Transforms 6 questions
Preview
Video Player
00:00
00:00
Understanding 3D Transforms
2:423D 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.
[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