Control the Shared 3d Perspective of Multiple Elements with GreenSock
By default, elements use their own perspective, so if you rotate multiple elements on the page the perspective will seem a bit off for each of them. The solution is to set the perspective on the container element, then each child element will follow the parents' perspective.
Instructor: [00:00] Working with 3D, it's also super important to be aware of perspective. If I take the parent element and tweenMax setDocumentBody, which is the parent element of my divs, and I'll set the perspective to something like 100.
[00:16] Hit save here. When I click, you'll see a fairly large perspective on that. I can bring that down and click. You'll see a huge perspective on that, meaning that the vanishing point in way in the back. Now, the vanishing point is relative to the parent container and not this element itself.
[00:36] To demonstrate that, let's create a bunch of elements, so arrayFromLength. We'll do about 30 and map this to documentCreateElement, div. Now, we have 30 divs to work with, and we can just forEach on these.
[00:54] Each of these can be a box. With these boxes, we essentially want to do this stuff and delete that, hit save here. Now, all these boxes are lined up and smashed together. We'll restyle a couple things, we'll get rid of this, and instead say flex wrap is wrap. We'll add a border of five pixels solid black.
[01:20] Now, when I click on each of these, you can see some crazy perspective being applied. I'm going to add overflow hidden and get rid of that scroll bar, too. That's flashing and annoying me. I'll click, and you can see that crazy perspective being applied to each of these.
[01:39] If I bring that back up to something more reasonable, like 200 and click, you'll see less perspective, but it is perspective based on the parent container, rather than the individual element. Also, if you ever see something get stuck like this, and you're using the plus-equals, a trick you can use is say tweenMax is tweening. I'll check the box.
[02:09] Then you can just say if it's not tweening, then apply that tween. That will just prevent that tween from triggering if it's not done yet. If I click a bunch of times, it'll never get stuck there. It'll complete before it goes again.
[02:24] If I didn't have that, like I did before, and I clicked a couple times, you'll see it get stuck in weird spots. We'll add that back in, so it doesn't. Then to tweak this, just to really show off the perspective, I'm going to document add event listener mouse move.
[02:44] Grab the event, and now, I'm just going to take this, where I set the perspective, and set it to event.x. Then instead of tweening these, I'm just going to set the box rotation to something like 30°. You can see, they're all rotated a little bit, but if I move my mouse over here, you'll see the perspective jump up real huge.
[03:09] As I move my mouse to the right, it settles down back to what you would think 30° looks like. Again, this is all 30°, it's just the matter of perspective. If I drag and make the browser wider, it's even more pronounced.
[03:23] Go all the way to the right, and back to the left, where that perspective starts to get towards zero. You can see where that vanishing point is, because they're all trying to reach that vanishing point for the perspective.