7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.11 Animating the 3D Buttons

Hello, and welcome back to Practical Web Animation. In this lesson, we're gonna pick up where we left off with our 3D buttons. Now, they're not quite 3D yet, but we're getting there. If you remember, we have some anchor tags with a span inside them. That span contains our initial text, but then we have a copy of that text inside our after pseudo element. And that's the one with this dark green background, and it's currently covering up our span. So if we were to, for example, hide this background color. Let's just get rid of it for a second. We can see that our original span has this light green background color, which is really just white with a little bit of transparency. And I wanna get rid of that. I don't want this to be there, initially. In fact, I'm gonna wait a little bit to get rid of it, because I want to make it pretty clear what we're doing with our transformation. So for now, let's leave it alone. But before we get any further, I wanna make sure, let me undo that so that we have our background color in place again. I wanna make sure that we create a new copy of this. So the starting pin for this lesson, if you haven't been following along and you wanna just open up where we left off, the starting pin can be found in your course notes for this lesson. Once you open that up, let's go ahead and create a fork so that we have a new copy of it. And we wanna do two things. We're basically gonna animate the after pseudo element in the span separately. So we have the span inside this anchor tag, and then also inside the anchor tag we have, if we scroll down in our CSS, this after pseudo element, which is just another copy of the button itself with a darker background. So we're gonna be animating both the span and the after pseudo element, and we're gonna squash the span upward, so we're gonna use the scale y property to squash it. And as we do that, the dark green background here, which is going to be squashed initially, is going to stretch upward to take its place, making it look like we have a 3D block that's just rotating. So, since the after pseudo element, the one with the dark green background, is the one that we can see right now, let's go ahead and squash it by default. So I'm gonna start before we forget, by placing a transition property on this after pseudo element. So we'll set our transition to all and let's make it 0.5 seconds so .5s. Then I want to squash it. So, just before that transition, I'm gonna use the transform property to scale it down, using the scale Y property, with a capital Y there. That will scale it only vertically, and then inside parentheses we're gonna squash it all the way to a value of 0, so that it is completely flat. And as we saw, since we already turned this transition property on when we changed that value, here we saw it squashed. Now we have a little bit of a problem. If we set this back to 1, watch how it animates. You'll see that it animated from the vertical center. When we squash it, set it down to 0, you'll see that again as it squashed, it squashed towards the center. We actually need it to squash down all the way to the bottom. By default, when we use the scale Y property like this, it's going to scale it from the vertical center of the item. We want to scale it from the bottom of the item, so we need to specify the transform origin of that transformation. So just before the transform, we're gonna use the transform-origin property, and we want to transform it, and this is gonna take two values here. The first one is gonna be the xy value, or the horizontal value, which doesn't really matter because we're only squashing it vertically. So we can set this to anything we want to, I'm just gonna set it to 0. And then the second value is gonna be our vertical value. Where on this button do we want to set the anchor point for that transformation? Well, we want to be on the very bottom of the button, and we can actually get it to do that by setting this value to 100%. 100% of the height is 40 pixels, and sure enough, as we saw that animate, it animated all the way down to the bottom. And we can see that again if we scale it back up. So let's set this value to 1 again and watch it animate. And we see that it animates up from the very bottom, and that's exactly what we're going for. So let's set this back to 0 for our initial effect. Then when we hover over it, so I'm just gonna copy this whole line here for the after pseudo element, or pseudo class. And I'm gonna copy that. And then down here below, skip a couple lines and I'm gonna paste it, but we're going to do that on hover. So we're gonna say a:hover::after. So when we hover over the anchor tag, the after pseudo element is going to animate up. So let's put our opening and closing curly brackets there, and here let's just grab this transform property and copy it, and then paste it inside that hover and set our scale Y to 1. So now when we hover over our buttons, we can see the bottom animating up. So that's half of our animation, the other half of the animation is going to be the top button, or the original button animating off. And it's gonna squash upwards at the same rate. So let's jump up to our span rule, we'll just scroll up until we find it, and it's this one right here. So for our span rule, we've already set our transition. Let's just bring that down to 0.5 seconds, so that it's moving at the same rate as our other one. And when we hover over it, we're going to scale it down as we see right here. But instead of scaling the anchor tag, we're gonna scale the span inside the anchor tag. But we're gonna do it on the hover event for the anchor tag. So a:hover span, we're gonna scale the Y value. Now when we hover over it, it doesn't do exactly what we're expecting. It's flattening from the top, and it's kind of hard to see because this other animation is getting in the way, but it's doing the same thing. It's basically squashing it using the vertical center of the button as its transformation point, which is not what we want. We want this one, we want the anchor tag for this one I should say, to be up at the very top. And as you can see, the top is actually moving down as we hover over it. Not what we want. So, for our span rule here, inside the span rule, my highlighting is going crazy again, we'll jump down just before our transition, and I'm gonna set the transform-origin this time to a value of 0 0. So the first 0 is the horizontal position, and the second 0 is the vertical position. So if we set that vertical position to 0, that's going to represent the very top. And now if we hover over it, we can see the effect we're going for. Now the problem is, it still looks kind of flat. This isn't really the effect that I want. It really looks flat. And we can add a lot to this animation, just by animating the color of our background. And as we animate the color of our background, it'll look like we actually have light hitting it, that we have a light source, and as we turn a dark side towards that light source, the dark side is gonna get lighter. So as I mentioned before, for our initial button we're not gonna have a background color. So let's go back up to our span, and get rid of this initial background color. And so that actually looks a little bit better than it did before. But now I want to give it a little bit of a background color, and lighten up that green background a little bit as it's rotating up so it'll make it look like there's a light source above it. So we're gonna jump down to our hover span rule, and not only are we going to transform the scale Y property, we're also going to animate the background color. So let's create a background color property here. And we're gonna set this to a value of 59B264. So now when we hover over it, we see that that background color is lightening up as it's getting squashed. So it looks a little more 3D than it did before. Now the last thing we need to do is to animate the background color on the bottom section as well, the section that's animating onto our navigation menu, the section that's basically turning up from the bottom. So we're gonna scroll down to the hover effect, for our after pseudo class. And here we're going to animate not only the scale, but also the background color, just like we did for our span. So background-color: space. It's really hard to talk and type at the same time, sometimes. So our new background color for this is gonna be 399244. So this is gonna end up being a slightly lighter shade of green than it is right now. Right now it's a really dark green. So now let's hover over it, and we can see the effect we're going for. And that's a really cool 3D effect. And unless you're looking really closely, it really looks like you're rotating a 3D block there. And the cool thing is, if you move your mouse cursor away from it and just look at it, it looks like a plain, ordinary navigation menu. And you don't get that nice little surprise until you hover over the buttons, and see the animation there. So I think that's a really cool effect, and I'm sure you can find some other ways to enhance that a little bit, and play around with those values. But once again, thank you for watching and I'll see you in the next lesson.

Back to the top