Activate 3D Space with perspective6:47 with Guil Hernandez
Before you can transform an element in 3D, you need to establish a 3D perspective on the page, otherwise your transforms will still appear flat and two-dimensional. To define 3D space, you can use the 'perspective' property.
- Perspective is what separates 3D transforms from 2D transforms.
- You define 3D space with the 'perspective' property.
perspectiveproperty creates the illusion of depth; it sets how far away or how close objects appear to us.
- You can apply the
perspectiveproperty to the
<div>, or any block-level element.
- The value for
perspectivecan be set in pixels, em, or rem.
- When you enable 3D space with
perspective, the smaller the value, the deeper the perspective; the greater the value, the shallower the perspective.
- A value between
800pxusually renders a realistic perspective.
- If you delete the
perspectiveproperty at any time, you will lose the 3D effect on your page.
You will need to launch the workspace on this page to follow along using 0:00 the latest files. 0:03 You can also download the files and follow along with your preferred text editor. 0:04 So in the latest index.html file for this section, 0:09 you will see three photo-container divs, and nested inside are these 0:12 photo wrappers containing an image and a photo description div. 0:18 Now, when you preview the index.html file you can see that we're using an awesome 0:24 space theme for this section on 3D transforms. 0:29 Now, currently the images are positioned on top of the photo description divs, so 0:32 we're not able to see them yet but we'll see what they look like in just a bit. 0:38 So perspective is what separates 3D transforms from 2D transforms. 0:42 So before you can transform an element in 3D, 0:49 you need to first establish a 3D perspective on the page 0:52 otherwise your transforms will still appear flat and two dimensional. 0:56 So to define 3D space, you can use the perspective property. 1:01 Now we can apply the perspective property to the body element, a div element, 1:06 or any other block-level element. 1:11 So I'm going to apply perspective to the page's content div. 1:14 Back inside interactions.css I'm going to target 1:19 the class content then inside I'll add the perspective property. 1:27 The perspective property creates the illusion of depth. 1:33 It sets the distance between the viewer and the objects we're transforming. 1:37 In other words, how far away or how close objects appear to us. 1:42 That distance is determined by the perspective value we use. 1:47 Perspective accepts one value, and the value can be in pixels, ems or rems. 1:52 So I start with a value of 700 pixels. 1:58 Now don't worry if you're not sure what this value means just yet. 2:02 We're gonna test a few different perspective values later 2:06 when we add transforms. 2:09 Then you'll understand how this value affects how we see elements in 3D space. 2:11 So now we've let the content div know 2:16 that all its children are ready to move around in 3D space. 2:19 With the perspective in place the stage is set for 3D transformations. 2:23 So, we've defined a perspective, but 2:29 we don't see any visual changes yet on the page. 2:32 Well that's because the perspective property alone doesn't create 3D objects. 2:35 It simply enables a 3D space for children elements. 2:41 So now to see some cool 3D effects we need to 2:45 apply transforms to the elements inside the content div. 2:48 For example, besides being able to rotate elements clockwise or 2:56 counterclockwise as we do with 2D rotations. 3:00 We can rotate elements in 3D space to make them appear as if parts of them are moving 3:04 towards or away from the viewer. 3:09 So right below the content rule, 3:11 I'm gonna target the class photo then I'll add the transform property. 3:13 And I'm going to use the rotate y function and set the value to 30 degrees. 3:19 So, once I refresh the browser, 3:26 we're seeing the photos rotate in 3D space on the x axis. 3:29 So, let's try a few more values, let's say 35. 3:34 Let's make it larger, something like 55, cool. 3:40 Now, a positive value will turn the photos left to right, and 3:45 a negative value will turn them in the opposite direction. 3:49 So now, we're able to see that illusion of depth along the z axis. 3:56 And if I change the rotateY value to 90 degrees, 4:01 you can really see how the perspective is being applied. 4:07 The three photos are rotated at a 90 degree angle. 4:11 So we can barely see the side edge of the middle image, 4:14 if at all, because it's directly in front of us on the Z axis and 4:19 the two photos on the sides reveal a lot more depth. 4:23 Just like in the 3D bookshelf example you saw in the previous video. 4:27 So now let's see what rotateX looks like in 3D space. 4:31 So back in the photo rule I'll change this function to 4:35 a rotateX function and set the value to 15 degrees. 4:40 So a positive value flips the photos backwards on the x axis. 4:47 And a negative value will flip them forwards. 4:56 So the rotate x and rotate y functions are 2D transforms you can use in regular 5:03 2D space but as you can tell the results are a lot more interesting in 3D space. 5:09 When you enable 3D space with the perspective property 5:16 the smaller the value is the deeper the perspective will be and 5:20 the greater the value, the shallower the perspective. 5:25 So for example, if I change the perspective value to 5:28 100 pixels or even 200 pixels. 5:32 Notice how the smaller values move the viewer closer to the transformed 5:38 element on the z axis. 5:43 So the visual effects appear more intense. 5:44 On the other hand, large values push the viewer away further back on the z axis. 5:47 So I'll change the value to 2000 pixels. 5:53 And now let's say 3000 pixels. 5:58 So as you can see, the larger values create a shallow perspective. 6:03 So the effect is more subtle. 6:08 Now 700 pixels seems like a good realistic perspective value for my photo gallery. 6:09 So I'll stick with this value moving forward. 6:15 And you'll commonly see perspective values from 500 pixels to 1500 6:17 pixels being used in 3D transforms. 6:22 So, you can use a higher or lower value if you want. 6:25 But remember if you happen to delete the perspective property at any time, you 6:30 will lose the 3D effect on your page and everything will go back to looking flat. 6:35 Coming up in the next video, we'll start rotating the photos in 3D space. 6:42
You need to sign up for Treehouse in order to download course files.Sign up