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.