Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Transitions and Transforms

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Changing the Viewing Position with perspective-origin

4:46 with Guil Hernandez

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 is 50% 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 than 50% moves the origin down.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up