Transforms & Opacity

[00:00:00]
>> Kevin Powell: The next ones are a little bit more interesting, it's our transforms. We have 4 different that we can do. We can scale, rotate, translate, and skew. So let's take a look at them. There's two different ways to do these now. We're going to start with the old school way and then do the more modern way. I've been doing the opposite a lot lately, but we'll start with the old way. The old way, they're called transforms, so we use a transform property.

[00:00:25]
And I choose what do I want to transform. I want to translate it. Translate means move. These are all functions, so they get the parentheses, 50 pixels, means it's going to move over by 50 pixels. 100 pixels, it will move down by 100 pixels. Pretty straightforward. This is what you should use instead of position relative if you want to move stuff around. I said that you generally don't do a position relative just to do a top, bottom, left and right.

[00:00:54]
I would use a transform instead. The next one we have is, let's just leave this in a comment actually. Just so I don't have to retype them after. There we go. The next one that we have is scale. So scale of one would be the element stays exactly the same, 1.5, I'm multiplying it by 1.5 or 0.5. I'm going to shrink it down by 0.5 and make it smaller. That's my scale. We've already seen that we can rotate things.

[00:01:36]
So here I can do a rotate. 45 degrees. And we rotate it. A fun thing, a lot of people don't know, I'm always using degrees most of the time, but you can actually do like a 0.25 turn. And that's we're turning it, well, 0.25 a square, it's sideways now, but we don't know it. We'll do a 1.25. There we go. So you can use a turn unit if you want. Why you might want to do turn, let's just say, not the best example, but a box hover.

[00:02:16]
Transform. Of rotate. 1 turn, and this is at your 0 turn. And we're transitioning it, transition. Uh, transform. One second, that's a save for a quick demo, and it's spinning, it's doing one full turnaround. It looks like a lot more just cause the edges are going very quickly, but it's doing one full turn all the way around. So instead of doing 360 degrees, you could save a couple characters there.

[00:02:43]
Same type of thing though. And the last one I mentioned is skew. Oh, really fast actually with the transitions, transforms, you might notice that got a little glitchy at one point, I think. So when you start doing these things, it's possible like the mouse comes off as they're, there we go. If I go in a corner, it sort of goes wild. So just be careful with hover effects on things if the thing is moving, cause then you can get into these zones where it sort of starts glitching out a little bit.

[00:03:10]
But that was our rotate, so we can move that rotate off down here. I also don't want this hover effect, so we'll remove that. And the last one is our skew. Transform, skew, and we can skew an element, which is kind of weird. It's also with degrees. Say 25 degrees and it's going to skew, and I had my transition there, so that looked nice and cool when I did that. Let's go to a -25 and it skews the other way.

[00:03:43]
I can also say this is a 0. -25 and it will skew the other direction, and you could skew in both directions and it gets kind of weird. I don't know how it's going to look. Start whatever, you could start getting some weird shapes. Skew is probably the least used one out of all of them, and it's also the only one that now doesn't have its own property. So you don't have to use transform anymore for any of those ones that I pasted down here.

[00:04:09]
We're going to comment out that if you do want a, we saw it already, rotate, you can just say rotate and put a rotate like that on its own property, and it will rotate. I can add a scale 0.8, and it will scale down. And I can add a translate. 50 pixels, 50 pixels, and it's going to move over. I tend to use these more often just because it's a little bit easier. If you are doing animations or transitions with them, it means you don't have to repeat things that aren't changing, which is a little bit easier.

[00:04:44]
The one thing that's different is here I'm doing all three of these. They're going in a specific order. It's first it's doing the translate and then it's rotating it. So if I turn off my rotate. And then I turn my rotate back on. You see, it's already moved over, then it's doing it. If you're using the transform like the old way, it's not even a longhand, it's just the old way of doing it. Transform, and I say this is a rotate of 10 degrees.

[00:05:21]
And a translate. Of 50 pixels, 50 pixels. A little bit annoying. This is comma separated and the new one is not. That's one of the biggest inconsistencies in CSS is when do you include a comma separated list or a space separated list. You just have to learn those things. If it doesn't work with one, try the other, as we've been saying throughout. So in this case, I'm actually rotating first, then translating it.

[00:05:48]
If I move the rotate to this side, it will end up in a different position slightly. Now, it's not a huge difference. Let's just make this a little bit bigger, maybe. That was fun. If I move this over to this side again, we're going to see it's going to slide somewhere else. Cause it's rotating, then translating based on that rotation. That only is affecting if I'm using this. If I'm using these properties, it's always the same order, it's always the translate first, then the rotate.

[00:06:18]
So it's a little bit more consistent, which is one of the reasons I like doing the actual properties instead of using the transform, but sometimes you need something weird, maybe this is what you need. Just be aware of that where the order of these becomes very important because sometimes some strange things can happen. And when the rotate is first, it gets confusing cause we rotate, then we're translating off that rotation.