- 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
Creating a Consistent Depth Perspective
2:393D 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.
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