1
00:00:00,250 --> 00:00:04,680
By default, 3D transformed elements
share the same perspective

2
00:00:04,680 --> 00:00:07,210
defined in the parent container.

3
00:00:07,210 --> 00:00:13,040
So this means that our photos all have
the same vanishing point in the 3D scene,

4
00:00:13,040 --> 00:00:18,030
the point that keeps everything in
perspective and creates realistic depth.

5
00:00:18,030 --> 00:00:22,840
So because of this, some photos appear
to have more depth than others,

6
00:00:22,840 --> 00:00:26,810
making the rotation behavior
of each photo different.

7
00:00:26,810 --> 00:00:31,810
Notice how the photo on the left
stretches out to the top left, and

8
00:00:31,810 --> 00:00:35,110
the one on the right stretches
out to the top right.

9
00:00:35,110 --> 00:00:41,410
But the photo in the center has a flatter
and perfectly centered rotation.

10
00:00:41,410 --> 00:00:46,460
And you'll notice this more when you
change the rotations to rotate Y and

11
00:00:46,460 --> 00:00:51,090
set perspective origin back to
the default center viewing position.

12
00:00:51,090 --> 00:00:54,950
So I'm going to comment out
the perspective origin declaration and

13
00:00:54,950 --> 00:00:56,660
the content rule.

14
00:00:56,660 --> 00:01:01,270
Then in the photo hover rule,
I'll change the x value for

15
00:01:01,270 --> 00:01:06,820
rotate x to zero and the y value to one.

16
00:01:06,820 --> 00:01:12,360
Now you could also apply the same
rotate 3D function to side B,

17
00:01:12,360 --> 00:01:15,750
but I'll simply change it
from rotateX to rotateY.

18
00:01:18,810 --> 00:01:23,527
So now, the photos on the sides
appear to jump out of the page and

19
00:01:23,527 --> 00:01:25,574
if you resize the browser,

20
00:01:25,574 --> 00:01:30,472
you can see just how inconsistent
the rotations look on the page.

21
00:01:35,352 --> 00:01:38,542
For this image gallery,
I want the perspective to be the same for

22
00:01:38,542 --> 00:01:39,810
every photo.

23
00:01:39,810 --> 00:01:43,270
I want every photo to rotate
exactly like the one in the middle.

24
00:01:44,890 --> 00:01:50,358
To adjust this, I can move the perspective
property to the parent div of each photo.

25
00:01:50,358 --> 00:01:55,660
In the index.html file,
notice how there's a div with the class,

26
00:01:55,660 --> 00:01:59,470
photo container,
wrapping each photo in the gallery.

27
00:01:59,470 --> 00:02:04,380
So I'm going to make each of these
photo container divs its own separate

28
00:02:04,380 --> 00:02:05,490
3D container.

29
00:02:05,490 --> 00:02:08,990
This will apply the same
perspective to every photo.

30
00:02:08,990 --> 00:02:14,422
So I'll move the perspective
from content to photo container

31
00:02:14,422 --> 00:02:19,131
by simply changing the selector
to photo container.

32
00:02:22,192 --> 00:02:25,130
And great this looks much better.

33
00:02:25,130 --> 00:02:27,850
Now my rotations look consistent.

34
00:02:27,850 --> 00:02:31,650
They all have the same depth and
rotation behavior.

35
00:02:31,650 --> 00:02:36,790
And notice how the photos on the sides no
longer stretch out to the top left and

36
00:02:36,790 --> 00:02:37,920
top right corners.