Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Transitions and Transforms!
You have completed CSS Transitions and Transforms!
Preview
Before 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.
Instead of using the
.photo selector shown in the video, you will want to use the .photo-container selector for the transform rotate rules..content {
perspective: 700px;
}
.photo-container {
transform: rotateY(55deg)
}
Resources
Video review
- Perspective is what separates 3D transforms from 2D transforms.
- You define 3D space with the 'perspective' property.
- The
perspectiveproperty creates the illusion of depth; it sets how far away or how close objects appear to us. - You can apply the
perspectiveproperty to the<body>, a<div>, or any block-level element. - The value for
perspectivecan be set in pixels, em, or rem. - When you enable 3D space with
perspective, the smaller the value, the deeper the perspective; the greater the value, the shallower the perspective. - A value between
500pxand800pxusually renders a realistic perspective. - If you delete the
perspectiveproperty at any time, you will lose the 3D effect on your page.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up