"How to Make a Website with WordPress" was retired on February 3, 2017. You are now viewing the recommended replacement.

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

Well done!

You have completed CSS Transitions and Transforms!

Sign up for Treehouse Back to Library

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