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
By 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.
Resources
Video review
-
perspective-origin
sets where the viewer sees the objects in 3D space. -
perspective-origin
doesn't do anything by itself; you need to apply the property to the element enabling 3D space. -
perspective-origin
accepts two values that set the horizontal and vertical position; the values can be length units, percentages or position keywords. - The default value for
perspective-origin
is50% 50%
. - A horizontal percentage value below
50%
moves the origin towards the left. - A horizontal percentage value over
50%
moves the origin towards the right. - A vertical percentage value lower than
50%
moves the origin up from the default center position, while a value higher than50%
moves the origin down.
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
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
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