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
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-originsets where the viewer sees the objects in 3D space. -
perspective-origindoesn't do anything by itself; you need to apply the property to the element enabling 3D space. -
perspective-originaccepts two values that set the horizontal and vertical position; the values can be length units, percentages or position keywords. - The default value for
perspective-originis50% 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
A perspective of 700px gives our 3D
scene a good amount of depth and
0:00
a realistic perspective.
0:05
By default,
0:07
the position at which the viewer sees
3D space is the center of the screen.
0:08
So, currently we're viewing the rotations
as if they were directly in front of us.
0:14
But we can change this viewing position
with the perspective-origin property.
0:19
If you were actually viewing
this scene in real life, so
0:25
imagine three medium-sized panels
swinging directly in front of you,
0:29
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