Preview
Video Player
00:00
00:00
Activate 3D Space with perspective
6:47Before you can transform an element in 3D, you need to establish a 3D perspective on the page, otherwise, your transforms will still appear flat and two-dimensional. To define 3D space, you can use the 'perspective' property.
You will need to launch the workspace
on this page to follow along using
0:00
the latest files.
0:03
You can also download the files and follow
along with your preferred text editor.
0:04
So in the latest index.html file for
this section,
0:09
you will see three photo-container divs,
and nested inside are these
0:12
photo wrappers containing an image and
a photo description div.
0:18
Now, when you preview the index.html file
you can see that we're using an awesome
0:24
space theme for
this section on 3D transforms.
0:29
Now, currently the images are positioned
on top of the photo description divs, so
0:32
we're not able to see them yet but we'll
see what they look like in just a bit.
0:38
So perspective is what separates
3D transforms from 2D transforms.
0:42
So before you can
transform an element in 3D,
0:49
you need to first establish
a 3D perspective on the page
0:52
otherwise your transforms will still
appear flat and two dimensional.
0:56
So to define 3D space,
you can use the perspective property.
1:01
Now we can apply the perspective property
to the body element, a div element,
1:06
or any other block-level element.
1:11
So I'm going to apply perspective
to the page's content div.
1:14
Back inside interactions.css
I'm going to target
1:19
the class content then inside I'll
add the perspective property.
1:27
The perspective property
creates the illusion of depth.
1:33
It sets the distance between the viewer
and the objects we're transforming.
1:37
In other words, how far away or
how close objects appear to us.
1:42
That distance is determined by
the perspective value we use.
1:47
Perspective accepts one value, and
the value can be in pixels, ems or rems.
1:52
So I start with a value of 700 pixels.
1:58
Now don't worry if you're not sure
what this value means just yet.
2:02
We're gonna test a few different
perspective values later
2:06
when we add transforms.
2:09
Then you'll understand how this value
affects how we see elements in 3D space.
2:11
So now we've let the content div know
2:16
that all its children are ready
to move around in 3D space.
2:19
With the perspective in place the stage
is set for 3D transformations.
2:23
So, we've defined a perspective, but
2:29
we don't see any visual changes yet
on the page.
2:32
Well that's because the perspective
property alone doesn't create 3D objects.
2:35
It simply enables a 3D space for
children elements.
2:41
So now to see some cool
3D effects we need to
2:45
apply transforms to the elements
inside the content div.
2:48
For example, besides being able
to rotate elements clockwise or
2:56
counterclockwise as we
do with 2D rotations.
3:00
We can rotate elements in 3D space to make
them appear as if parts of them are moving
3:04
towards or away from the viewer.
3:09
So right below the content rule,
3:11
I'm gonna target the class photo then
I'll add the transform property.
3:13
And I'm going to use the rotate y
function and set the value to 30 degrees.
3:19
So, once I refresh the browser,
3:26
we're seeing the photos rotate
in 3D space on the x axis.
3:29
So, let's try a few more values,
let's say 35.
3:34
Let's make it larger,
something like 55, cool.
3:40
Now, a positive value will turn
the photos left to right, and
3:45
a negative value will turn them
in the opposite direction.
3:49
So now, we're able to see that
illusion of depth along the z axis.
3:56
And if I change the rotateY
value to 90 degrees,
4:01
you can really see how
the perspective is being applied.
4:07
The three photos are rotated
at a 90 degree angle.
4:11
So we can barely see the side
edge of the middle image,
4:14
if at all, because it's directly
in front of us on the Z axis and
4:19
the two photos on the sides
reveal a lot more depth.
4:23
Just like in the 3D bookshelf example
you saw in the previous video.
4:27
So now let's see what rotateX
looks like in 3D space.
4:31
So back in the photo rule
I'll change this function to
4:35
a rotateX function and
set the value to 15 degrees.
4:40
So a positive value flips
the photos backwards on the x axis.
4:47
And a negative value
will flip them forwards.
4:56
So the rotate x and rotate y functions
are 2D transforms you can use in regular
5:03
2D space but as you can tell the results
are a lot more interesting in 3D space.
5:09
When you enable 3D space with
the perspective property
5:16
the smaller the value is the deeper
the perspective will be and
5:20
the greater the value,
the shallower the perspective.
5:25
So for example,
if I change the perspective value to
5:28
100 pixels or even 200 pixels.
5:32
Notice how the smaller values move
the viewer closer to the transformed
5:38
element on the z axis.
5:43
So the visual effects appear more intense.
5:44
On the other hand, large values push the
viewer away further back on the z axis.
5:47
So I'll change the value to 2000 pixels.
5:53
And now let's say 3000 pixels.
5:58
So as you can see, the larger values
create a shallow perspective.
6:03
So the effect is more subtle.
6:08
Now 700 pixels seems like a good realistic
perspective value for my photo gallery.
6:09
So I'll stick with this
value moving forward.
6:15
And you'll commonly see perspective
values from 500 pixels to 1500
6:17
pixels being used in 3D transforms.
6:22
So, you can use a higher or
lower value if you want.
6:25
But remember if you happen to delete
the perspective property at any time, you
6:30
will lose the 3D effect on your page and
everything will go back to looking flat.
6:35
Coming up in the next video, we'll
start rotating the photos in 3D space.
6:42