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

Estelle demos using transforms to translate, rotate and skew elements.

Get Unlimited Access Now

Transcript from the "Transform Overview" Lesson

[00:00:03]
>> Estelle Weyl: Let's go over transforms. Okay, so here, I'm gonna use this little RSVP sign for everything. And the reason I said RSVP is because the last time I did it, I did it with a plane, and when you'd flip the plane, you couldn't tell that it was upside-down cuz it was symmetrical.

[00:00:18] But RSVP, when it's flipped upside-down and you can't read it, you can really see it. So this little logo, it's generated content on top of the RSVP. And it's the exact same size, the exact same font. Everything's the exact same except for it has the background color of pale golden rod and greenish blue weird color as a drop shadow.

[00:00:38] So the original, what it would like without the transform is always the white one. The way it looks with the transform is the golden rod one. Well it's actually gold, I'm not sure. Anyway, so here I've transformed the letters, I've translated it, -90 pixels, and 300 pixels. Which means I've moved it 90 pixels backwards and 300 pixels down.

[00:01:03] Then I've rotated it 50 degrees, then I've scaled it so it's smaller. It's 70% of the width and 90% of the height, and then I've skewed it. We're gonna go all over those. Let's see if I can just not move it down 300 pixels.
>> Estelle Weyl: No, I can't edit this one.

[00:01:30] So this is how we transform something. We basically change it by translating it, rotating it, and skewing it. You don't have to use all of them, and the order actually matters. It's basically the syntax is we can either say transform none or you can use up to all of these functions, one or more of these functions.

[00:01:50] And there's actually a fifth function which we'll cover later. So what does this support? That looks pretty green, doesn't it? Let's show all. And then go to IE cuz that's what we always do. It start with IE 9 and with IE 9 it was supported with prefix. If you're not supporting IE 9 anymore, don't use a prefix.

[00:02:10] I do not know about the performance with Microsoft or IE 9 and transforms if it actually causes a problem. And the Blackberry 10, since no one uses it it doesn't really matter. You don't need to add a WebKit prefix for Blackberry.