1 00:00:00,400 --> 00:00:03,570 You will need to launch the workspace on this page to follow along using 2 00:00:03,570 --> 00:00:04,770 the latest files. 3 00:00:04,770 --> 00:00:09,090 You can also download the files and follow along with your preferred text editor. 4 00:00:09,090 --> 00:00:12,820 So in the latest index.html file for this section, 5 00:00:12,820 --> 00:00:18,890 you will see three photo-container divs, and nested inside are these 6 00:00:18,890 --> 00:00:24,490 photo wrappers containing an image and a photo description div. 7 00:00:24,490 --> 00:00:29,460 Now, when you preview the index.html file you can see that we're using an awesome 8 00:00:29,460 --> 00:00:32,830 space theme for this section on 3D transforms. 9 00:00:32,830 --> 00:00:38,780 Now, currently the images are positioned on top of the photo description divs, so 10 00:00:38,780 --> 00:00:42,490 we're not able to see them yet but we'll see what they look like in just a bit. 11 00:00:42,490 --> 00:00:49,210 So perspective is what separates 3D transforms from 2D transforms. 12 00:00:49,210 --> 00:00:52,290 So before you can transform an element in 3D, 13 00:00:52,290 --> 00:00:56,490 you need to first establish a 3D perspective on the page 14 00:00:56,490 --> 00:01:01,000 otherwise your transforms will still appear flat and two dimensional. 15 00:01:01,000 --> 00:01:06,470 So to define 3D space, you can use the perspective property. 16 00:01:06,470 --> 00:01:11,470 Now we can apply the perspective property to the body element, a div element, 17 00:01:11,470 --> 00:01:14,190 or any other block-level element. 18 00:01:14,190 --> 00:01:19,888 So I'm going to apply perspective to the page's content div. 19 00:01:19,888 --> 00:01:25,530 Back inside interactions.css I'm going to target 20 00:01:27,030 --> 00:01:32,480 the class content then inside I'll add the perspective property. 21 00:01:33,990 --> 00:01:37,980 The perspective property creates the illusion of depth. 22 00:01:37,980 --> 00:01:42,660 It sets the distance between the viewer and the objects we're transforming. 23 00:01:42,660 --> 00:01:47,240 In other words, how far away or how close objects appear to us. 24 00:01:47,240 --> 00:01:52,510 That distance is determined by the perspective value we use. 25 00:01:52,510 --> 00:01:58,310 Perspective accepts one value, and the value can be in pixels, ems or rems. 26 00:01:58,310 --> 00:02:02,310 So I start with a value of 700 pixels. 27 00:02:02,310 --> 00:02:06,500 Now don't worry if you're not sure what this value means just yet. 28 00:02:06,500 --> 00:02:09,980 We're gonna test a few different perspective values later 29 00:02:09,980 --> 00:02:11,510 when we add transforms. 30 00:02:11,510 --> 00:02:16,390 Then you'll understand how this value affects how we see elements in 3D space. 31 00:02:16,390 --> 00:02:19,400 So now we've let the content div know 32 00:02:19,400 --> 00:02:23,750 that all its children are ready to move around in 3D space. 33 00:02:23,750 --> 00:02:27,979 With the perspective in place the stage is set for 3D transformations. 34 00:02:29,160 --> 00:02:32,160 So, we've defined a perspective, but 35 00:02:32,160 --> 00:02:35,850 we don't see any visual changes yet on the page. 36 00:02:35,850 --> 00:02:41,320 Well that's because the perspective property alone doesn't create 3D objects. 37 00:02:41,320 --> 00:02:45,090 It simply enables a 3D space for children elements. 38 00:02:45,090 --> 00:02:48,102 So now to see some cool 3D effects we need to 39 00:02:48,102 --> 00:02:52,213 apply transforms to the elements inside the content div. 40 00:02:56,227 --> 00:03:00,653 For example, besides being able to rotate elements clockwise or 41 00:03:00,653 --> 00:03:04,260 counterclockwise as we do with 2D rotations. 42 00:03:04,260 --> 00:03:09,310 We can rotate elements in 3D space to make them appear as if parts of them are moving 43 00:03:09,310 --> 00:03:11,570 towards or away from the viewer. 44 00:03:11,570 --> 00:03:13,220 So right below the content rule, 45 00:03:13,220 --> 00:03:18,780 I'm gonna target the class photo then I'll add the transform property. 46 00:03:19,910 --> 00:03:26,960 And I'm going to use the rotate y function and set the value to 30 degrees. 47 00:03:26,960 --> 00:03:29,420 So, once I refresh the browser, 48 00:03:29,420 --> 00:03:34,480 we're seeing the photos rotate in 3D space on the x axis. 49 00:03:34,480 --> 00:03:37,362 So, let's try a few more values, let's say 35. 50 00:03:40,338 --> 00:03:45,250 Let's make it larger, something like 55, cool. 51 00:03:45,250 --> 00:03:49,284 Now, a positive value will turn the photos left to right, and 52 00:03:49,284 --> 00:03:53,173 a negative value will turn them in the opposite direction. 53 00:03:56,977 --> 00:04:01,730 So now, we're able to see that illusion of depth along the z axis. 54 00:04:01,730 --> 00:04:07,590 And if I change the rotateY value to 90 degrees, 55 00:04:07,590 --> 00:04:11,060 you can really see how the perspective is being applied. 56 00:04:11,060 --> 00:04:14,860 The three photos are rotated at a 90 degree angle. 57 00:04:14,860 --> 00:04:19,570 So we can barely see the side edge of the middle image, 58 00:04:19,570 --> 00:04:23,720 if at all, because it's directly in front of us on the Z axis and 59 00:04:23,720 --> 00:04:27,600 the two photos on the sides reveal a lot more depth. 60 00:04:27,600 --> 00:04:31,610 Just like in the 3D bookshelf example you saw in the previous video. 61 00:04:31,610 --> 00:04:35,610 So now let's see what rotateX looks like in 3D space. 62 00:04:35,610 --> 00:04:40,020 So back in the photo rule I'll change this function to 63 00:04:40,020 --> 00:04:44,435 a rotateX function and set the value to 15 degrees. 64 00:04:47,480 --> 00:04:53,517 So a positive value flips the photos backwards on the x axis. 65 00:04:56,109 --> 00:04:58,904 And a negative value will flip them forwards. 66 00:05:03,257 --> 00:05:09,454 So the rotate x and rotate y functions are 2D transforms you can use in regular 67 00:05:09,454 --> 00:05:16,680 2D space but as you can tell the results are a lot more interesting in 3D space. 68 00:05:16,680 --> 00:05:20,160 When you enable 3D space with the perspective property 69 00:05:20,160 --> 00:05:25,050 the smaller the value is the deeper the perspective will be and 70 00:05:25,050 --> 00:05:28,070 the greater the value, the shallower the perspective. 71 00:05:28,070 --> 00:05:32,800 So for example, if I change the perspective value to 72 00:05:32,800 --> 00:05:36,248 100 pixels or even 200 pixels. 73 00:05:38,458 --> 00:05:43,165 Notice how the smaller values move the viewer closer to the transformed 74 00:05:43,165 --> 00:05:44,940 element on the z axis. 75 00:05:44,940 --> 00:05:47,570 So the visual effects appear more intense. 76 00:05:47,570 --> 00:05:53,580 On the other hand, large values push the viewer away further back on the z axis. 77 00:05:53,580 --> 00:05:56,299 So I'll change the value to 2000 pixels. 78 00:05:58,270 --> 00:06:01,321 And now let's say 3000 pixels. 79 00:06:03,476 --> 00:06:08,225 So as you can see, the larger values create a shallow perspective. 80 00:06:08,225 --> 00:06:09,875 So the effect is more subtle. 81 00:06:09,875 --> 00:06:15,985 Now 700 pixels seems like a good realistic perspective value for my photo gallery. 82 00:06:15,985 --> 00:06:17,945 So I'll stick with this value moving forward. 83 00:06:17,945 --> 00:06:22,325 And you'll commonly see perspective values from 500 pixels to 1500 84 00:06:22,325 --> 00:06:25,200 pixels being used in 3D transforms. 85 00:06:25,200 --> 00:06:28,024 So, you can use a higher or lower value if you want. 86 00:06:30,578 --> 00:06:35,611 But remember if you happen to delete the perspective property at any time, you 87 00:06:35,611 --> 00:06:40,810 will lose the 3D effect on your page and everything will go back to looking flat. 88 00:06:42,750 --> 00:06:46,310 Coming up in the next video, we'll start rotating the photos in 3D space.