Hello everyone.
Today we're going to talk briefly about transforms.
Transforms are very similar to transitions, in that they provide another
option for changing the appearance of elements that are on our page.
So we can change things in both the two dimensional manner and
a three dimensional manner as people are looking at your site.
So let's look at some of the two dimensional transform options.
We're gonna to talk about translate, rotate, scale,
skew and matrix, and how each one of these can work within your CSS3.
The first option I'm going to show you is translate.
What translate will do is that you can give it two values, I've called them x and
y and depending on those values,
you can move the element to the left and right or up and down.
If x is positive,
you move off to the right, if it's negative you move to the left.
With y, if it's positive you move down and if it's negative you move up.
So let's look at an actual example to make it a little bit more clear.
Here, I've got this nice blue element.
And what I'm about to say is that I want to translate it, 100 and 75.
So you're going to expect to see it move off to the right and down a little bit.
So you can see, again, it's hard to really tell when things go up and down.
But if you look at the margins, we've almost effectively increased the margins.
The next option is rotate.
When you rotate something, you are rotating, or
I kind of like to think of it as spinning the element, a certain number of degrees.
You don't see the spin.
You just see the result or what it would look like at the end.
So here I have another element and I'm gonna tell it to rotate by 30 degrees.
So from here, to here.
Now it's really important that remember to put the deg.
If you just put 30, many of the browsers are not going to have that work.
In fact, most of them won't.
So make sure you give it the degrees you want it to turn, some sort of number, 30,
90, 80, and then use degree.
Next, let's talk about scale.
And scale is just a fancy way of saying, let's make it wider or taller.
So again, you give it two numbers, and
that's how much you wanna change the width and the height of an element.
So here I have a smaller block, and
I've decided I'd like to make it two times as wide and three times as high.
Here's a new element after the transform scale.
Skew is very hard for me to explain what it does, and it's even harder to do
it because I always forget my left and rights when I'm looking at the camera.
So, again, you're going to want to play with this one and
look at some of the examples.
What you're doing is you're rotating the element a certain number of degrees around
the x angle and a certain number of degrees around the y angle.
So here I'm going to show you a skew, 30 degrees by 15 degrees.
You start off here and you end up kind of turned at a very kind of weird angle.
And again it's very hard to show you this when I'm staring at the screen, so
I'm hoping you'll type that in and kind of play with it a little bit.
The next and final option is matrix.
And when you use the matrix,
you can combine all of the 2D transform methods into one command at once.
I never use this, because I find it far too confusing to remember
which one's scale, which one's rotate, which one's skew.
So unless you feel really confident with your CSS3, I would avoid using matrix and
go ahead and use each of the other individual transforms one at a time.
So the other ones that we just talked about were two dimensional transforms.
We can also do three dimensional transforms, and
they're very similar to ones we just talked about.
So for instance with rotate, now instead of just rotating along the x or
y axis, we can also rotate around the z dimension as well.
So if you wanted to use a 3D rotate, your options now are transform:rotateY
how many degrees, rotateX, rotateZ,
or you can actually say rotate3d and give it numbers along every single dimension.
I rarely use the 3D dimensions.
But we do have the options.
We have the rotate, we have the scale, and we have the translate.
And they can really do some really interesting things with how you want your
elements to look.
When it comes time to use transforms, there's a few things to think about.
Typically when you use transforms you're going to use them with state changes.
If you remember, that means you might have a transform happen when you do an on
hover, or an on focus, or an on active.
If you're really just trying to change what an element looks like right from
the start and leave it that way, you may want to think about just taking pictures
and messing with the pictures and doing things offline.
It's faster and it doesn't use up as much bandwidth.
However, it's a cool way to kinda play with things and
gain confidence with your CSS.
Of course, with so many things we've been learning in this class, it's important to
remember that you'll often require browser prefixes to get transforms to work.
So one more tool in your tool belt for
learning how to do something exciting with your page.
I know that I didn't do my normal example here, but
the next video is going to show an example using transitions, transforms, and
some of the other things we've been learning all along.
I hope you'll take a look at it and
feel a little more confident about what we just learned with transforms.
Good luck.