Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Creating a Consistent Depth Perspective

2:39 with Guil Hernandez

3D transformed elements share the same perspective defined in the parent container. Because of this, some elements will have more depth than others, making each transform look different. In this video, we'll apply 3D perspective directly on single elements to make the rotations consistent.

Resources

Video review

  • When 3D transformed elements share the same perspective, they have the same vanishing point.
  • The vanishing point is the point that keeps everything in perspective and creates realistic depth.
  • Some 3D elements will appear to have more depth than others.
  • You can create a consistent depth perspective by defining multiple 3D scenes.
  • 0:00

    By default, 3D transformed elements share the same perspective

  • 0:04

    defined in the parent container.

  • 0:07

    So this means that our photos all have the same vanishing point in the 3D scene,

  • 0:13

    the point that keeps everything in perspective and creates realistic depth.

  • 0:18

    So because of this, some photos appear to have more depth than others,

  • 0:22

    making the rotation behavior of each photo different.

  • 0:26

    Notice how the photo on the left stretches out to the top left, and

  • 0:31

    the one on the right stretches out to the top right.

  • 0:35

    But the photo in the center has a flatter and perfectly centered rotation.

  • 0:41

    And you'll notice this more when you change the rotations to rotate Y and

  • 0:46

    set perspective origin back to the default center viewing position.

  • 0:51

    So I'm going to comment out the perspective origin declaration and

  • 0:54

    the content rule.

  • 0:56

    Then in the photo hover rule, I'll change the x value for

  • 1:01

    rotate x to zero and the y value to one.

  • 1:06

    Now you could also apply the same rotate 3D function to side B,

  • 1:12

    but I'll simply change it from rotateX to rotateY.

  • 1:18

    So now, the photos on the sides appear to jump out of the page and

  • 1:23

    if you resize the browser,

  • 1:25

    you can see just how inconsistent the rotations look on the page.

  • 1:35

    For this image gallery, I want the perspective to be the same for

  • 1:38

    every photo.

  • 1:39

    I want every photo to rotate exactly like the one in the middle.

  • 1:44

    To adjust this, I can move the perspective property to the parent div of each photo.

  • 1:50

    In the index.html file, notice how there's a div with the class,

  • 1:55

    photo container, wrapping each photo in the gallery.

  • 1:59

    So I'm going to make each of these photo container divs its own separate

  • 2:04

    3D container.

  • 2:05

    This will apply the same perspective to every photo.

  • 2:08

    So I'll move the perspective from content to photo container

  • 2:14

    by simply changing the selector to photo container.

  • 2:22

    And great this looks much better.

  • 2:25

    Now my rotations look consistent.

  • 2:27

    They all have the same depth and rotation behavior.

  • 2:31

    And notice how the photos on the sides no longer stretch out to the top left and

  • 2:36

    top right corners.

You need to sign up for Treehouse in order to download course files.

Sign up