Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
Start a free Basic trial
to watch this video
In this video, you'll learn about some of the additional 2D functions that can be used with the webkittransform property in CSS3. You'll also learn how to chain multiple functions together to transform a single element.

0:00
[?Jazzy music]

0:03
[THINK VITAMIN][MEMBERSHIP][ESTd 2010]

0:05
[membership.thinkvitamin.com]

0:07
[CSS3 Animation]

0:09
[2D Transforms: Part 2][with Nick Pettit]

0:13
Now that you're familiar with the basics of the Transform property,

0:16
let's take a look at some of the additional functions that we can use.

0:20
The next function is called Rotate.

0:23
This one is pretty straightforward and just as the name implies,

0:27
it allows you to rotate your elements.

0:29
So to our webkittransform property,

0:32
we'll apply the rotate function

0:36
and we'll give it about 1 radian.

0:40
And switching back to Safari,

0:44
you can see that we've rotated our element.

0:47
Now, the Rotate function takes a single argument,

0:51
the value for which must be expressed in CSS angles.

0:55
Nowin this case, we used radians

0:57
but we can also use degrees.

1:00
So we'll change this to something like 25 degrees.

1:05
And that's what that looks like.

1:07
Now, as was the case with Translations,

1:10
angles can also be expressed as negative values

1:13
if we want to make counterclockwise rotations.

1:16
So if we just add negative 25 degrees

1:20
and switch back to the browser

1:22
you can see that we've rotated it the opposite direction.

1:25
The next function is called Skew.

1:28
Let's try it out.

1:30
So we'll change Rotate to Skew

1:34
and we'll put in some values.

1:39
And when we switch back to Safari

1:43
you can see that we've skewed the angles of our element.

1:47
Like several other 2D Transform functions,

1:50
Skew takes an X and a Y argument.

1:54
The values for Skew are in the form of CSS angles

1:58
so, just like the Rotate function, it can also accept radians instead of degrees

2:03
which is what we're using here.

2:05
You can use Skew to create some neat effects

2:08
and you can Warp your elements

2:10
into all sorts of angular, 4sided shapes.

2:13
The higher the values, the greater the Skew.

2:16
And of course, Skew also accepts negative values.

2:20
So let's try that outwe'll change

2:22
X to negative 5 degrees, and we'll change Y to negative 5 degrees;

2:27
and when we switch back to Safari

2:29
you can see that we've slightly changed the Skew of our element.

2:35
Now, Transforms are pretty useful by themselves

2:37
but they get really powerful when you chain them together.

2:41
You can actually apply multiple Transforms to a single element.

2:46
Let's say that we wanted to Translate, Scale, and Rotate an element all at once.

2:52
We could do something like this:

2:55
we'll just delete what we have here,

2:59
and we'll Translate our element.

3:03
We'll do negative 155 pixels, 22 pixels for the Y;

3:09
and then we separate each function with a space.

3:13
So next we'll use the Scale function;

3:17
and we'll Scale down the X a little bit,

3:20
and we'll also Scale down the Y.

3:23
And then we'll use the Rotate function.

3:27
And we'll Rotate our element by a negative 28 degrees.

3:32
So, switching back to Safari,

3:35
you can see that we've Translated our element to the left,

3:38
and down a little bit.

3:40
We've Scaled down the X and Y values,

3:43
and we've Rotated the element counterclockwise, by 28 degrees.

3:47
Pretty cool.

3:49
Nowby default, if you only enter 1 value for Translate and Scale,

3:55
the values will be applied to the first argument

3:57
which is the Xaxis.

3:59
But what if you only wanted to touch the Y values?

4:03
You could just zero out the X values,

4:05
but that's kind of clunky.

4:07
Instead, there are some additional functions

4:09
that are specific to the X and Yaxes.

4:13
So let's say that we just wanted to touch the Yaxis.

4:16
We could change Translate to TranslateY,

4:21
and we'll get rid of our X value.

4:25
We'll change Scale to ScaleY,

4:30
and again, we'll get rid of our X value.

4:32
And if we switch back to Safari,

4:35
you can see that we've now only Translated the Y,

4:39
and only Scaled the Y.

4:41
This also works for the Skew function.

4:43
So, for example, you could say SkewX or SkewY.

4:48
Now, there is one more function that I haven't mentioned

4:51
and that is the Matrix function.

4:54
Using the Matrix function, you can define full 2D Matrices.

4:59
I'm not going to demonstrate this, as it's rarely necessary,

5:02
but if you're doing some very complex Transformations

5:05
and you need exacting control,

5:08
just be aware that the Matrix function is available for you to use.

5:12
That's it for 2Dbut it's only the beginning for Transforms.

5:15
In the next few videos we'll take a look at

5:17
how to do Transforms in 3D.

5:20
[?Jazzy music] [THINK VITAMIN][MEMBERSHIP][ESTd 2010]

5:22
[membership.thinkvitamin.com]
You need to sign up for Treehouse in order to download course files.
Sign up