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

Transforms can be combined using multiple functions. Transform functions are implemented in the order declared, and can be impacted by the transform-origin property.

Get Unlimited Access Now

Transcript from the "Function & Transform Order" Lesson

[00:00:01]
>> Estelle: Okay, so here, I'm translating it 90 pixels to the left, and 200 pixels down. Rotating it 15 degrees from the middle around. Scaling it, the width 1.5 times as wide, and twice as tall. And then I'm skewing it along the x-axis negative 8 degrees. How come it doesn't, what would happen if I actually translated it here?

[00:00:27] Or transform and translated it, and then I transform and rotated it? This one, would over write this one, right? And then this would over this one, and then this would over write that one. So if you wanna put multiple in for right now, you actually put all of them on one line, space separated.

[00:00:51] Let's hope this works, 100, nope, okay. I didn't activate this slide. So you can kinda see through it. So it says transform, translate, negative 80 pixels. Comma 100 pixels, so that's a translate function. So it first translates it, and then it rotates it, and then it scales it, and then it skews it, in that order.

[00:01:15]
>> Estelle: I'm gonna cover the order in a little bit again. Except for the order is right, that little slide that's being hidden, there it is, okay, I'm gonna cover it first. So transform order is really important. Because the original area is that middle blocks, which is purple, but kind of looks black for you all.

[00:01:38] And there, that's where it was originally. The green one was translated 200 pixels, and then rotated 135 degrees. The pink one was rotated 135 degrees. So the access about when it was translated it that went down. So it's following that line in terms of the axis. Okay, so just to go back here.

[00:02:05] Take advantage of transform origin, which we haven't covered yet. Multiple values are SPACE separated, no commas. The order of the values matter, we use 3D transforms that are hardware accelerated, which means they're put on the GPU instead of the CPU. Updates differently. But it also means that it kind of has the index of infinity and you have to basically translate something else, hardware accelerated to put it on top

[00:02:37]
>> Estelle: And there's a few links for information on more stuff. We talked about function order and let's play with this for a second. So here, it says, transform on the rust one, which is this one, is translated 200 degrees. And then, no, the rust one is this one.

[00:02:56] I'm sorry I don't know my colors. It's translated along the x-axis 200 degrees, and then its rotated 135 degrees. The second one is first rotated, and then translated.
>> Estelle: So we're just going to change this degree to whatever we change this degree. So here, I'm going to rotate it negative 135 degrees, and then 135.

[00:03:30] So it was first translated, it was first rotated and so, it went along that line, that line that I just added there. So you can see where it goes.
>> Estelle: And then, let's do a 95 degrees.
>> Estelle: Okay so,
>> Estelle: Negative 200, okay, so what I'm gonna do here is this.

[00:04:02] So here, I'm going to rotate it first negative 35 degrees, right? One second, so now, when I move it, when I translate it, it's gonna go along the line here, right? Let's see if it does that. It did, so you see how the order matters? Okay, go ahead.

[00:04:25]
>> male: I actually think it's the opposite way. It's actually rotated in the [COUGH] rust example, rotation happens first. But it rotates around the origin. And then the translation happens next, so if you move the origin it would demonstrate-
>> Estelle: So the origin is something completely different. The origin is around where you wanna rotate it, but by default it rotates around its center.

[00:04:50] So both of these are rotated in around the center. So the center of that rust one is still on that 0 line, right? The middle of that gold one is along is on that black line. So it rotated so that black line rotated with it, and then it went along the black line.

[00:05:13] So normally, you'll want to translate first, and than rotate it that's usually the effect you want and that's why I'm harping on the second one, because if you rotate first, and then translate, it's gonna go in some weird direction.