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.