- 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
Changing the Viewing Position with perspective-origin
4:46By default, the position at which the viewer sees 3D space is the center of the screen. You can change the viewing position with the 'perspective-origin' property.
Earlier, we defined a perspective
of 700px in a content rule
0:00
to enable 3D space inside the content div.
0:05
A perspective of 700px gives our 3D
scene a good amount of depth and
0:09
a realistic perspective.
0:14
By default,
0:16
the position at which the viewer sees
3D space is the center of the screen.
0:17
So, currently we're viewing the rotations
as if they were directly in front of us.
0:23
But we can change this viewing position
with the perspective-origin property.
0:28
If you were actually viewing
this scene in real life, so
0:34
imagine three medium-sized panels
swinging directly in front of you,
0:38
your not always going to view them from
a direct centered angle like this.
0:42
You might stand up and look down at the
panels, or kneel down and look up at them.
0:47
Maybe even look at them from
the side at a low angle and more.
0:53
So, the different viewing positions
change your perspective and
0:57
the depth of the objects.
1:01
The perspective-origin property can set
1:05
where the viewer sees
the objects in 3D space.
1:07
Now, perspective-origin
doesn't do anything by itself.
1:11
You need to apply the property to
the element that enables 3D space.
1:15
So, I'm going to write the property
inside the content rule.
1:20
Perspective-origin accepts two values that
set the horizontal and vertical position.
1:29
It can accept length units,
percentages, or
1:36
the position keywords, top,
right, bottom, and left.
1:39
Since the default viewing position in 3D
transforms is the center of the screen,
1:43
the default value for
a perspective-origin is 50%, 50%,
1:49
which sets the horizontal and
vertical viewing position to the center.
1:54
Now, if I change both values to 100%,
100%,
2:00
the perspective-origin is
now positioned bottom right.
2:06
So, once we hover over a photo, we can see
that the viewing position has shifted,
2:12
in fact I'll slow the transition down so
we can see it a little better.
2:17
I'll change the duration
value from 1s to 3s.
2:21
So, now it looks like we're looking at
the scene from a bottom right angle.
2:28
The photos stretch toward the top
left corner within this perspective.
2:33
Notice how the photo on the far
left has the most depth.
2:38
It stretches out almost twice as
far as the photo on the right.
2:41
The one closest to us from this
bottom right viewing angle.
2:45
Let's go back to
the perspective-origin property and
2:53
change the value to bottom left.
2:57
So, this value shifts the viewing
position to a bottom left angle.
3:03
So now the photo on the far right
appears to have the most depth.
3:08
If you're using percentage values,
3:18
a horizontal value below 50%
moves the origin to the left.
3:21
So for example, the value 0% 50%
3:26
produces a center left viewing position.
3:30
Now, a horizontal percentage value over
3:38
50% moves the origin towards
the right of the scene.
3:42
So, the value 80%, 50% shifts
the viewing position to the top right
3:46
Now, a vertical percentage
value lower than 50%
4:01
will move the origin up from
the default center position.
4:05
And a value higher than 50%
will move the origin down.
4:09
So, if I set the value to 50% or 100%,
4:15
the viewing position is at center bottom.
4:20
Making it appear as if the viewer is
looking up at the scene from the center.
4:26
I'll go ahead and
keep this perspective-origin and
4:33
set the transition duration back to 1s.
4:36