Changing the Viewing Position with perspective-origin4: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.
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
- 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.
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