1 00:00:00,500 --> 00:00:05,300 Earlier, we defined a perspective of 700px in a content rule 2 00:00:05,300 --> 00:00:08,380 to enable 3D space inside the content div. 3 00:00:09,460 --> 00:00:14,280 A perspective of 700px gives our 3D scene a good amount of depth and 4 00:00:14,280 --> 00:00:16,470 a realistic perspective. 5 00:00:16,470 --> 00:00:17,350 By default, 6 00:00:17,350 --> 00:00:23,670 the position at which the viewer sees 3D space is the center of the screen. 7 00:00:23,670 --> 00:00:28,780 So, currently we're viewing the rotations as if they were directly in front of us. 8 00:00:28,780 --> 00:00:33,920 But we can change this viewing position with the perspective-origin property. 9 00:00:34,960 --> 00:00:38,350 If you were actually viewing this scene in real life, so 10 00:00:38,350 --> 00:00:42,910 imagine three medium-sized panels swinging directly in front of you, 11 00:00:42,910 --> 00:00:47,990 your not always going to view them from a direct centered angle like this. 12 00:00:47,990 --> 00:00:53,470 You might stand up and look down at the panels, or kneel down and look up at them. 13 00:00:53,470 --> 00:00:56,740 Maybe even look at them from the side at a low angle and more. 14 00:00:57,800 --> 00:01:01,960 So, the different viewing positions change your perspective and 15 00:01:01,960 --> 00:01:03,690 the depth of the objects. 16 00:01:05,022 --> 00:01:07,750 The perspective-origin property can set 17 00:01:07,750 --> 00:01:11,250 where the viewer sees the objects in 3D space. 18 00:01:11,250 --> 00:01:15,140 Now, perspective-origin doesn't do anything by itself. 19 00:01:15,140 --> 00:01:20,150 You need to apply the property to the element that enables 3D space. 20 00:01:20,150 --> 00:01:24,069 So, I'm going to write the property inside the content rule. 21 00:01:29,969 --> 00:01:36,440 Perspective-origin accepts two values that set the horizontal and vertical position. 22 00:01:36,440 --> 00:01:39,210 It can accept length units, percentages, or 23 00:01:39,210 --> 00:01:43,020 the position keywords, top, right, bottom, and left. 24 00:01:43,020 --> 00:01:49,060 Since the default viewing position in 3D transforms is the center of the screen, 25 00:01:49,060 --> 00:01:54,440 the default value for a perspective-origin is 50%, 50%, 26 00:01:54,440 --> 00:01:59,540 which sets the horizontal and vertical viewing position to the center. 27 00:02:00,820 --> 00:02:06,485 Now, if I change both values to 100%, 100%, 28 00:02:06,485 --> 00:02:12,658 the perspective-origin is now positioned bottom right. 29 00:02:12,658 --> 00:02:17,380 So, once we hover over a photo, we can see that the viewing position has shifted, 30 00:02:17,380 --> 00:02:21,920 in fact I'll slow the transition down so we can see it a little better. 31 00:02:21,920 --> 00:02:28,669 I'll change the duration value from 1s to 3s. 32 00:02:28,669 --> 00:02:33,180 So, now it looks like we're looking at the scene from a bottom right angle. 33 00:02:33,180 --> 00:02:38,030 The photos stretch toward the top left corner within this perspective. 34 00:02:38,030 --> 00:02:41,330 Notice how the photo on the far left has the most depth. 35 00:02:41,330 --> 00:02:45,700 It stretches out almost twice as far as the photo on the right. 36 00:02:45,700 --> 00:02:48,898 The one closest to us from this bottom right viewing angle. 37 00:02:53,158 --> 00:02:57,867 Let's go back to the perspective-origin property and 38 00:02:57,867 --> 00:03:00,679 change the value to bottom left. 39 00:03:03,679 --> 00:03:08,959 So, this value shifts the viewing position to a bottom left angle. 40 00:03:08,959 --> 00:03:13,299 So now the photo on the far right appears to have the most depth. 41 00:03:18,378 --> 00:03:21,180 If you're using percentage values, 42 00:03:21,180 --> 00:03:26,160 a horizontal value below 50% moves the origin to the left. 43 00:03:26,160 --> 00:03:30,672 So for example, the value 0% 50% 44 00:03:30,672 --> 00:03:35,749 produces a center left viewing position. 45 00:03:38,889 --> 00:03:42,223 Now, a horizontal percentage value over 46 00:03:42,223 --> 00:03:46,708 50% moves the origin towards the right of the scene. 47 00:03:46,708 --> 00:03:54,169 So, the value 80%, 50% shifts the viewing position to the top right 48 00:04:01,368 --> 00:04:05,216 Now, a vertical percentage value lower than 50% 49 00:04:05,216 --> 00:04:09,507 will move the origin up from the default center position. 50 00:04:09,507 --> 00:04:15,460 And a value higher than 50% will move the origin down. 51 00:04:15,460 --> 00:04:20,730 So, if I set the value to 50% or 100%, 52 00:04:20,730 --> 00:04:26,160 the viewing position is at center bottom. 53 00:04:26,160 --> 00:04:30,190 Making it appear as if the viewer is looking up at the scene from the center. 54 00:04:33,690 --> 00:04:36,855 I'll go ahead and keep this perspective-origin and 55 00:04:36,855 --> 00:04:39,323 set the transition duration back to 1s.