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 transformed elements share the same perspective defined in the parent container. Because of this, some elements will have more depth than others, making each transform look different. In this video, we'll apply 3D perspective directly on single elements to make the rotations consistent.
Resources
Video review
- When 3D transformed elements share the same perspective, they have the same vanishing point.
- The vanishing point is the point that keeps everything in perspective and creates realistic depth.
- Some 3D elements will appear to have more depth than others.
- You can create a consistent depth perspective by defining multiple 3D scenes.
By default, 3D transformed elements
share the same perspective
0:00
defined in the parent container.
0:04
So this means that our photos all have
the same vanishing point in the 3D scene,
0:07
the point that keeps everything in
perspective and creates realistic depth.
0:13
So because of this, some photos appear
to have more depth than others,
0:18
making the rotation behavior
of each photo different.
0:22
Notice how the photo on the left
stretches out to the top left, and
0:26
the one on the right stretches
out to the top right.
0:31
But the photo in the center has a flatter
and perfectly centered rotation.
0:35
And you'll notice this more when you
change the rotations to rotate Y and
0:41
set perspective origin back to
the default center viewing position.
0:46
So I'm going to comment out
the perspective origin declaration and
0:51
the content rule.
0:54
Then in the photo hover rule,
I'll change the x value for
0:56
rotate x to zero and the y value to one.
1:01
Now you could also apply the same
rotate 3D function to side B,
1:06
but I'll simply change it
from rotateX to rotateY.
1:12
So now, the photos on the sides
appear to jump out of the page and
1:18
if you resize the browser,
1:23
you can see just how inconsistent
the rotations look on the page.
1:25
For this image gallery,
I want the perspective to be the same for
1:35
every photo.
1:38
I want every photo to rotate
exactly like the one in the middle.
1:39
To adjust this, I can move the perspective
property to the parent div of each photo.
1:44
In the index.html file,
notice how there's a div with the class,
1:50
photo container,
wrapping each photo in the gallery.
1:55
So I'm going to make each of these
photo container divs its own separate
1:59
3D container.
2:04
This will apply the same
perspective to every photo.
2:05
So I'll move the perspective
from content to photo container
2:08
by simply changing the selector
to photo container.
2:14
And great this looks much better.
2:22
Now my rotations look consistent.
2:25
They all have the same depth and
rotation behavior.
2:27
And notice how the photos on the sides no
longer stretch out to the top left and
2:31
top right corners.
2:36
You need to sign up for Treehouse in order to download course files.
Sign up