CSS In-Depth, v2 CSS In-Depth, v2

Perspective & Perspective Origin

Check out a free preview of the full CSS In-Depth, v2 course:
The "Perspective & Perspective Origin" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Perspective effects how close you are looking at the object when you translate it into 3D space. A smaller value appears closer to the object and has a greater impact.

Get Unlimited Access Now

Transcript from the "Perspective & Perspective Origin" Lesson

[00:00:01]
>> Estelle Weyl: So let's take a look at perspective. There is two ways to declare perspective, either you can declare it as the first value, the first function of the transform property. If it is not the first, it doesn't do anything. Okay, so you always want to start with perspective if you are doing 3D transforms and you're going include perspective.

[00:00:26]
>> Estelle Weyl: So perspective, you can put the perspective property itself on an individual element or on the parent. And the difference between putting it on an individual element versus on the parent is if you put it on the parent, all of it's children will have the same perspective so they'll all go out or whatever.

[00:00:43] And if you put it on each individual one, each will look the exact same. I'll show you an example of that, I think. So here, we have a perspective of 40. We can also have a perspective of 400, 0r a 4. And 4's gonna look crazy, whoops.
>> Estelle Weyl: Right, the smaller the number, it's basically this is 4 pixels from my eyeball.

[00:01:12]
>> Speaker 2: Wow.
>> Estelle Weyl: And this is 40 pixels from my eyeball, and this is 400 pixels from my eyeball. And so if we rotate it 80 degrees, and then we do 40,
>> Estelle Weyl: It's basically, I have this piece of paper right here that says RSVP on it.
>> Estelle Weyl: So remember that the prospective function must come first and that smaller numbers are basically closer to you eye and will have a bigger impact.

[00:01:47]
>> Estelle Weyl: So here, I put the perspective on the parent.
>> Estelle Weyl: And it looks almost the same, right? Doesn't make much of a difference when there's one, but you can really see it when you have multiple elements. And here's that. You see, here, the perspective of 400 pixels is put on the child.

[00:02:10] And these three look identical. Whereas here I put 400 pixels on the parent's, and you're basically looking at it from here, and so it's all of them are basically angling to the same point. So you'll generally, if you have one element, just put it on the child. If you have multiple elements and you're doing a city scene or something like that, put it on the parent of the whole thing.

[00:02:33] Okay, next we're gonna cover perspective origin. So right now, we've been basically staring at it dead center. Perspective-origin, you can give it an x or a y and it's basically where the viewer appears to be looking at the child.
>> Estelle Weyl: So here I have two of them. I have a perspective from the top left and perspective from the top right.

[00:03:00]
>> Estelle Weyl: So each one of these has perspective of 100. Let's make it 60, to make it more obnoxious, let's make it 120, so it's more reasonable. So this is number one and this is number two, I believe.
>> Estelle Weyl: Top right? Okay, yeah.
>> Estelle Weyl: And this is center, default is center, right, top right.

[00:03:33]
>> Estelle Weyl: So let's just look at this. So one of them is top right and the other one is just right. Let's do center right.
>> Estelle Weyl: It's not that much of a difference. You can play around with it until you figure out what you like. Just realize this is perspective-origin.

[00:03:53] You can actually say, I'm looking at it from here. I'm looking at it from there.
>> Estelle Weyl: Perspective origin only works if the perspective is on the parents. Here it's on the child, and it has no impact whatsoever. If you look at this in the previous one, same thing.

[00:04:12] So here, I'm looking at it from over to the right. That's perspective-origin. Transform-origin is something you're gonna use all the time and it doesn't have to be a 3D element. So basically, it's where, when you rotate something, rotating it right now by default it's the center of that element.

[00:04:36] But you can also make it the upper corner or you can make it somewhere completely else. Here the transform-origin property is in the upper left hand corner, it is rotating around this mark right there. 120, right? So no matter where I do it, that top corner is always gonna be touching.

[00:05:04]
>> Estelle Weyl: Right, you see how it's always touching? 320, it's always touching. Now let's do bottom,
>> Estelle Weyl: Whoop, bottom right. So this corner right here is always touching. It looks like it's not touching cuz these shadows are overlapping, but that little corner right there, it's on top of it.

[00:05:28] So 120,
>> Estelle Weyl: 220,
>> Estelle Weyl: 320 and then 420, cuz 420 is a cool number.