Up next in 10
Learn CSS Transform In 15 Minutes (1)
3K views
Feb 7, 2024
"Learn CSS Transform In 15 Minutes" is a tutorial video designed to teach viewers the fundamentals of CSS transforms within a concise timeframe. The creator likely covers various aspects of CSS transforms, including translation, rotation, scaling, and skewing, providing clear explanations and practical examples to demonstrate how each transform function works. By condensing the material into a short duration, the video aims to deliver a quick yet comprehensive overview of CSS transforms, enabling viewers to grasp the concepts and start implementing them in their web development projects efficiently. Viewers can expect to gain a solid understanding of CSS transforms within a brief timeframe.
View Video Transcript
0:00
Are you looking to make amazing CSS animations? Maybe just center an object? Or maybe you just
0:05
want to understand what the heck transform does? If so, this is the perfect video for you because
0:09
I'm going to be covering every single aspect of the transform property in CSS
0:13
so you're going to know exactly what's going on. Welcome back to WebDev Simplified. My name is Kyle, and my job is to simplify the web for you
0:23
so you can start building your dream project sooner. So if that sounds interesting, make sure you subscribe to the channel for more videos just like this. Now, transforms are going to be most
0:31
commonly used inside of animations, and that's because the transform property is incredibly
0:36
performant to animate and allows you to do tons of things from moving an element to scaling it
0:40
to making it rotate and other things on top of that. So if you're interested in using this in
0:45
the form of animations, I highly recommend checking out my full animation crash course
0:49
after you're done watching this video to really learn how you can also start writing cool
0:52
animations. But in this video, we're specifically going to stick to just the transform property
0:57
because on its own, it's really complex and a lot to understand. Now, to get started, I have a really
1:01
basic div with a bunch of just default styles. We're going to kind of ignore this for now. It just
1:05
gives us a div with a box on our screen we can play with, and then we're going to write all of
1:08
our transform styles inside this other div selector here. And to do a transform, you just type out the
1:14
word transform just like that. And now inside of here, you can actually specify a bunch of
1:18
different functions which do different things. And the first function I want to talk about is
1:22
probably the easiest to understand, and that is going to be the rotate function. As you can see
1:26
there are essentially five different variants of rotate. There's just plain rotate, there's
1:30
rotate3d, then there's the x, y, and z variation of this. This is something that you're going to
1:35
see really common with a lot of different transform functions is they're going to have a 2d version, they're going to have a 3d version, then they're going to have an x, y, and z version for
1:43
specifically dealing with those one little axis at a time. Generally, you're going to only work with
1:48
the 2d version, but sometimes you may want to work with the 3d version or just one axis at a time
1:52
In our case with rotate, it's just easiest to work with the two-dimensional version of just the
1:56
rotate function. And in here, all you do is you pass in a value of degrees or turns or whatever
2:01
you want. So we could say we're going to rotate this by 74 degrees. And now if we click save
2:07
you can see the box has been rotated 74 degrees. It's at an angle now, the text is sideways, and so
2:12
on. You know, we could do 90 degrees to get it perfectly, you know, rotated by one quarter
2:17
or you can use something called turns. We could say 0.75 turn, and that's going to rotate by
2:22
90 degrees or a quarter turn. And if we save, you can see the box is in the same position
2:26
You can use turns or you can use degrees, whichever one's easiest for you to understand
2:31
Now, if you wanted to dive into a 3d rotation, you could use the rotate 3d function like this
2:36
This function is actually quite confusing and difficult to use. So I recommend instead just
2:40
specifying, for example, rotate x or rotate y or rotate z individually. And that'd be how you
2:46
rotate in three dimensions. So we could rotate by 0.25 turn. And if we save, you can see it looks
2:51
like the box disappeared. And that's because we've rotated in the x direction, and the box is
2:55
essentially paper thin against the screen. So if we rotate by, for example, like 0.03 turn, and we
3:01
save or make it a little bit larger, we'll do 0.13 and save, you can see the box looks like it's
3:06
getting shorter. And that's because it's rotating away from us. So the top is getting further away
3:10
from us, and the bottom of the box is getting closer. As we get closer to that 0.25, you can
3:14
see the box is getting more and more squished, because it's rotating away from us. Same thing
3:18
with y, we can change the y rotation here, we'll start with 0.13. And you can see it looks like the
3:23
box is getting skinnier, we go to 0.23, it's again getting skinnier. And that's because it's getting
3:27
further away from us on one side, so the left side is getting further away from us, while the right
3:31
side is getting closer to us or the other way around, depending on which way you're rotating the box. Finally, we have rotate z, and rotate z works exactly the same as just rotate. So both of
3:40
those are the same, you don't have to worry about one or the other. Rotate x and y are the ones that
3:43
get kind of confusing, because that's when you're rotating into the screen or away from the screen
3:48
Generally, I don't ever use these though, I pretty much just use rotate on its own
3:51
just like this to rotate a box on the screen, because that's 99% of your use cases. If you're
3:56
doing some fancy 3d thing, then sure, you can do rotate x or rotate y as needed. And the next
4:01
transform function I want to talk about is another pretty easy one to understand. And that is the idea of scale. Scale is just going to allow you to make an object larger or smaller. And again
4:09
we have default scale, scale 3d, x, y and z. So the default scale, if we pass in one single number
4:15
to it, like 1.5, what's going to happen is it's going to make it 1.5 times bigger in the x and
4:20
the y direction at the same time. So if you pass it one value, it does both x and y, you pass it
4:25
two values, though, the first value is going to be x, the second value is going to be y. So in this
4:30
case, our y is two times bigger than normal, and our x is 1.5 times bigger than normal, or you
4:35
could make the y point five. So now our y is half the size it normally is, but our x dimension is
4:40
1.5 times the size it normally is, we can specify x and y both at the same time by using scale. Or
4:46
we can use for example, scale x, we can say we want to scale the x direction by point five, or
4:50
we can do scale y scale the y direction by point five. And again, we can do scale z for three
4:55
dimensional stuff. But our box right now is not three dimensional. So we don't really have to
4:59
worry about that. And again, that's only useful if you're doing some crazy three dimensional scaling
5:03
which for 99% of use cases, you're probably not the most part, we just want to do is just scale
5:09
point five, there you are boxes half the size it normally is, or we can do scale two, and now it's
5:13
twice the size it normally is. Now those are probably the two easiest to understand functions
5:17
for transform. But by far the most useful is going to be the translate function. And translate allows
5:22
you to move an object whether left, right, up, down or back and forth in the z direction. So you
5:27
have again, translate translate 3d x, y and z. So by default, we're going to start with translate
5:32
Let's just say that we're going to translate by 20 pixels or 30 pixels. We click Save. And you'll
5:36
notice the box moved to the right by 30 pixels. Without this translate, it's right in the middle
5:40
And with it, you can see it's been moved to the right by 30 pixels. The translate if you pass it
5:45
one value is the exact same as if you did translate x, it's translating in the x direction 30 pixels
5:50
to the right, if we did negative 30 pixels, it's going to translate 30 pixels to the left. So this
5:55
is without translate. And this is with translate, it's moved 30 pixels to the left, we can use
6:00
positive or negative numbers to move our objects based on a set number of pixels. The y direction
6:05
is the same thing, but it's going to be for the y axis. So we move 30 pixels up. Or if we do a
6:09
positive number, it's going to move the box down by those 30 pixels. Now if we go back to using the
6:14
translate function, we can actually pass this two separate parameters. So we can do 30 pixels
6:19
we could do like negative 40 pixels. What this is going to do is move our box to the right 30 pixels
6:23
in the x direction, and it's going to move us up 40 pixels in the y direction, the first value you
6:28
pass is going to be the x direction. The second value you pass is going to be the y direction for
6:32
the translate function. Finally, we have translate z again, but this isn't really going to make much
6:37
difference, I could put a large number in here. And if I remove it and save, you're going to notice
6:41
it doesn't look any different. And that's again, because we're not dealing with three dimensions here, we just have a two dimensional object. So moving it back and forth in the z direction isn't
6:48
going to make much difference. Now, this may not seem that useful. But the place where translate
6:52
becomes really powerful is when you start to use percentages. So let's say that we want to translate
6:56
by 100%. What do you think is going to happen? Well, what happens is it moves the box over by
7:02
100% of its own width. If we remove this, you'll notice the right edge of the box is right here
7:07
where my mouse is. And if I come and put this back, you see the box has moved all the way over
7:12
100% of its width. And this is a perfect if you want to do centering. So let's say that we just
7:17
have our div here. And we want to add an after element, which has some content that just says
7:22
after. And we'll say background is red. Let's just save, we'll get rid of this transform here
7:29
for now. And you can see we have that after content. But what I want to do with this after content is I want to center it at the very top of our box, we can say that the position
7:37
is going to be absolute, just like that. And here, our position is going to be relative
7:43
Now you can see it's centered in the very center of our box, we want to make it centered at the very top. So we can say our top is going to be zero. And to get it centered, we can just say
7:50
left is going to be 50%. That's going to put the left edge of our box right here in the very center
7:56
we want the center of after to be in the dead center. Now what we need to do is just say
8:00
transform, translate, and we want to translate negative 50% in the x direction, that's going to
8:06
move us half of our width over to the left, which as you can see, perfectly centers this after text
8:11
at the very top of our box. So by using position absolute in combination with left and transform
8:16
translate negative 50%, we can very easily center things based on their own width. This is something
8:21
that's really hard to do in CSS without this. So it's perfect that you have these properties
8:25
available to use this. And this is where 99% of my translate use cases come in when I need to
8:31
just perfectly center something translating by a percentage is the ideal and perfect way to do that
8:35
Now the next property that I want to talk about for transform is probably the least useful of them
8:39
and it's called skew. But then we're going to dive into right after this how you can use multiple
8:44
transforms together really easily and some tips and tricks that you really want to know. So just
8:47
make sure you stick through this property even though it's not quite as useful. So with skew
8:51
essentially what you're going to be doing is stretching out a shape. And again, with skew
8:55
we have all the different variants. So we have x and y, but there is no three dimensional skew to
8:58
worry about. For skew, let's just say that we want to skew by 90 degrees. And if we save, make this
9:05
actually something more like 30 degrees, you can see that our box has kind of been stretched and
9:08
tilted by about 30 degrees off to the side. And that's why we have this kind of weird shape showing
9:13
up for our box. And this first skew number that you pass is going to be the x direction. It'd be
9:18
the same thing as if we did skew x, they both look exactly the same. Now skew y is going to be
9:22
essentially the same thing, but we're skewing in the y direction now instead of the x direction
9:26
If you pass two properties to skew, the first one is the x and the second one is the y. So we'll do
9:31
30 and we'll say 40 degrees here for the y and let's just make it negative actually. Now you can
9:36
see we've skewed our box in x and y direction by 30 degrees and 40 degrees negative respectively
9:41
Now unlike all the other transform properties, I don't really have very many use cases for skew
9:45
but when you need it, it's the perfect one for that scenario. The next thing I want to talk about
9:49
is combining together multiple transforms because as you can see, we've done certain things, you
9:53
know, like rotate, you know, 30 degrees or whatever, we haven't combined multiple properties together
9:58
And the way that you do that inside of CSS is just put them all on the same transform. So we'll say
10:02
rotate 30 degrees, and we'll say scale of 0.75. Now we have a rotated and scale the box that is
10:09
using these two different properties, we can combine together as many of these as we want
10:13
For example, you know, I could say scale x by 7.75. I guess a translate y by negative 10 pixels
10:21
save and now our box has been scaled, it's been moved, it's been rotated and all these other
10:25
things. Now where the difficulty comes is when you want to override a transform because a transform
10:30
is one property. If you override it, you need to redefine everything inside that property
10:35
you can't just override one part of it, you have to override all of it or none of it. So let's
10:39
say by default, we're going to have a box that's going to have a scale of 1.2. And it's going to
10:44
be translated in the x direction by five pixels, which is actually make it 50 pixels. So by default
10:49
this is what our box is going to look like. And then let's just say that we're going to have a
10:52
class called dot big, and dot big is going to make our scale larger. So our scale is going to be two
10:58
Now you may think that's all we need to do. And if we come in here, and we say class of big
11:04
you're gonna know something interesting, it did scale, but our boxes no longer translated by 50
11:08
pixels anymore, we need to make sure we write that translate x of 50 pixels back into here to
11:14
make sure our box is translated and scaled correctly. Same thing if we have a class called
11:18
move that is going to move our box, what we can do is we can say that the translate is going to swap
11:22
here. So for our transform, oops, transform, what we want to make sure that we do is have our
11:30
translate the x direction be negative 50 pixels this time. And if we change our class here from
11:36
big to move, you're going to notice our box is moved the correct direction, but it now lost that
11:40
scaling of 1.2. We need to make sure we put that scale of 1.2 back into there. And then finally
11:46
what if we combine together dot big and dot move? Well, if we come down here and we try that out
11:51
you're going to notice our box only has the classes for dot move, it doesn't have any of
11:55
our dot big, we need to come in here, we need to make sure that our transform has the scale of two
12:00
and it has the proper translate x of negative 50 pixels. And now it's going to have all the
12:05
different properties we need. You'll notice this is a real pain to work with. We've repeated this
12:09
scale 1.2. And this translate negative 50 pixels all over the place. And if we have like three or
12:15
four different properties, we can define the amount of different CSS classes we need to define
12:19
is going to become astronomical. So doing your code this way is really painful. But it used to
12:24
be the only way to do this until we got CSS variables. CSS variables make this incredibly
12:29
easy to work with, though. So if you're unfamiliar with CSS variables, I recommend checking out my
12:32
video on them linked in the cards in description first, and then dive into this. What we want to do
12:37
is take our scale here, we want to use a CSS variable for our scale, we'll just call it scale
12:42
And by default, we're going to set this to 1.2. If it's not defined. Same thing with translate x
12:47
we want to use a variable, which we're just going to call translate x. And by default, we're going
12:52
to use that 50 pixel value if we don't define it. So now, if we get rid of the big and the move
12:57
class, you're gonna notice our box looks exactly like it did before it's in the right place with
13:01
the right scale. But down here where we have our big class, instead of redefining our transform
13:05
we're just going to redefine this scale variable and set it to two. And we're not even going to
13:09
touch the transform. And that allows us to change just the scale, it's going to get inserted into
13:13
the variable here without messing with anything else. Now if I put my big class on there, you're
13:18
going to notice it still is in the correct position and it got twice as big. Now for move, again
13:22
we're just going to change that translate x property, we're going to change it to negative
13:28
50 pixels. And now if I put the class of move on here, you're going to notice it moved off to the
13:35
left, but the scaling is still there. Now for big and move, we don't even need that we can completely
13:40
get rid of it. And that's because big and move already take care of the scale and the translate x
13:45
If I put the big class on here as well, we now have a big box that's also moved in the correct
13:49
location. And as you can see, our CSS is really easy to read, really easy to write. And if we
13:53
need to add something else, for example, we needed to add a skew into here, we could just say that
13:58
our skew is going to be, you know, like 50 degrees. And then up here, we would just add in our skew
14:04
with a variable for that skew. And let's just default it to 10 degrees, for example. And now
14:10
we also have this property for skew that's going to work exactly like we want it to. If we come in
14:15
here and add the skew class, you can see it as a much more skewed box and big and moved all at the
14:20
same time. Now, if you enjoyed this video, I highly recommend you check out my full CSS course
14:24
which has an entire section dedicated specifically to animations. So you can really master this
14:29
tricky section of CSS. If you're interested, I'll link that down in the description below for you
14:34
Also, with that said, thank you very much for watching and have a good day
#Clip Art & Animated GIFs
#Flash-Based Entertainment
#Fun & Trivia
#Online Goodies