Check out a free preview of the full CSS In-Depth, v2 course:
The "2D Transform Functions" 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:

Overview of the functions available to transform: translate, scale, rotate, skew and matrix.

Get Unlimited Access Now

Transcript from the "2D Transform Functions" Lesson

[00:00:02]
>> Estelle: So we have some two dimensional transform functions. We're gonna cover three dimensional later on but we're gonna start off with the two dimensional ones. So basically, flat surface, flat space. So we can translate it and we can do it one to two lengths.
>> Estelle: If it's basically along the x-axis and if you do provide the second value, I'll cover it later on.

[00:00:32] So we can translate it, we can scale it, we can scale it just along the x or just along the y. We can translate it or we can translate it just along the x-axis or just along the y-axis. We can rotate it, or we can rotate it just along the x-axis, or just along the y-axis, and we can skew it, either along the x-axis, the y-axis or both.

[00:00:52] And then there's something called matrix, and if you ever see matrix, 99.999% of the time that means that it was a machine that generated the transform. There are some people that can read matrices, I am not one of them.
>> Estelle: Okay, so, let’s start off with the translate function.

[00:01:10] Here, we’re translating at 100 pixels from the right and 100 pixels from the top. Here, this is gonna be nice when nothing works, yeah.
>> Estelle: Okay, here I put it totally off the screen cuz i said 900 pixels by accident, and meant to say 90, let's bring it back, and there it is.

[00:01:31] So here I translated it along the x-axis, I moved it 90 pixels to the right, or I could've moved it 90 pixels to the left.
>> Estelle: Here, I can move it 90 pixels down or 90 pixels up or I can move it 100 pixels in each direction or -100 and -100.

[00:01:58]
>> Estelle: So to make these slides work the way the slides work and by the way the URL for these slides is estelle.github.ios/cssmastery/transforms. To make these work you basically can edit these and then you just have to mouse off of them and they will work. So if I do -190 and I mouse off of it, it will go 190 pixels to the left.

[00:02:21] So, that is the translate function, you have transform translate, transform translatex an transform translatey. Then we have rotate, so that is rotated 90 degrees, but we can rotate it 180 degrees. We can rotate it just along the x-axis, that flipped it upside down or along the y-axis. Remember why I said I was gonna use a plane, cuz you can tell that's it's backwards.

[00:02:54] So one was upside down, one was backwards, or if I do rotate at 180 degrees, like this or actually at 90 degrees,
>> Estelle: Rotate x at 90 degrees, you can't see it.
>> Estelle: It's there but it can't be seen, this book is really thick, right? So if I start like this, I'll show the cover, if I start like this, right, this is not rotated at all.

[00:03:26] If I rotate it along the x-axis, to 90 degrees, because it's really thick you can see there's over a 1000 pages in this book. But an element like this it disappears because it doesn't actually, it's only two dimensional it's not three dimensional. So if I do 91 degrees you'll actually start seeing it again, 95, 120, right?

[00:03:53] So I flipped it, and now you are seeing the back. Sometimes you don't want to see the back. We're gonna show you how to get rid of it so you don't see the back if it's upside down. So that's rotatex, which rotates it along the x-axis, rotatey rotates it along the y-axis, so let's just do 120 along the y-axis.

[00:04:17]
>> Estelle: And let's just do 100, so here it is basically like this, it's almost like that. It's backward you see cuz it's already gone beyond 90%. If I wanna do it in the other direction so it's legible, I can do 80 degrees and it's the same width, okay.

[00:04:38]
>> Estelle: And here I have the scale, so right now, I'm making it 25% of the width, which is the first value is the width, and the second value is the height.
>> Estelle: So, here I'm making it only one value, so that's 75 percent of the width, and 75 percent of the height.

[00:04:57] Here, it's only the width, scale x is only the width, and scale y is only the height. So when you only say scale y, it's gonna be the same width as it was before, it's just gonna be a different height. If you say scale x only, it's gonna be the same height but you're going to change the width.

[00:05:18] If you scale with without anything here just scale, parentheses, no x, no y, and you only use one value, its both. And then if use two values its width that comes first and then the height so I could 95% here, or lets actually do 175% and really skew it there we go.

[00:05:41] Its actually off the screen on top I think a little bit, okay. Does the scale makes sense to people? Okay, now I've skewed it, I've skewed it five degrees, or no not skewed five degrees, let's skewed it 15 degrees cuz that's more noticeable. Okay, so I skewed it along the x-axis, so when I skew it along the x-axis, it means that the bottom and the top are still gonna be exactly parallel to where they were before.

[00:06:16] But the sides are going to be skewed either, oop,
>> Estelle: Okay, I want to put a negative in there.
>> Estelle: So,
>> Estelle: I've never done negative 95 degrees, I really don't know what that's doing. Let's do something smaller so we can see it. So here this right here is a 45 degree angle, you see that, that's a 45 degree angle.

[00:06:49] This right here, let's see if this works. It's a 75 degree angle.
>> Estelle: I guess, I'm not 100% sure, is that 75 degrees? Okay, so that's what skewing does, and let's go back to 15 and that's along the x. When I start doing it along the y-axis, the left and right are gonna be vertical, but the top and bottom are gonna be off.

[00:07:18] And so you've probably seen this effect a few times on like street signs and stuff maybe about eight degrees.
>> Estelle: Right, you've seen signs like that, skews the whole thing, the letters themselves are skewed as well, it takes the whole thing and skews it. You can skew both,

[00:07:40]
>> Estelle: And you see now neither the left, nothing is perpendicular and nothing is horizontal, both are skewed. Or you can actually just use a skew property, and the skew property is slightly different than doing skewx versus skewy. Cuz first, in this one, first it skews x and then it skews y, and this one it skews them both at the same time.

[00:08:05]
>> Estelle: So you see that slight difference.
>> Estelle: I'm just gonna do this and change it here to five degrees and see if it's,
>> Estelle: And then, 35, 35, and then 35, 35. I assume it's going to make a bigger difference here, yeah. That's a bigger difference, I used to understand the difference between the two of them.

[00:08:30] What it really meant to skew it one way and then the other way. But basically here,
>> Estelle: It first skews, let's say 15% and 0, right? So first it's skewing along the x-axis, and then once it's skewed that way, it takes that right there, and then skews it again, so it's skewing it twice.

[00:08:53] And if I were to do this,
>> Estelle: I would go for the screen and then lose my place, and it would be slightly different again.