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.