Up next in 10
Learn CSS Transform In 15 Minutes
3K views
Feb 7, 2024
Unlock the transformative power of CSS in just 15 minutes with this comprehensive tutorial on "Learning CSS Transform." In this video, you'll dive into the essentials of CSS transformations, gaining a swift and insightful understanding of how to manipulate and enhance the appearance of HTML elements. The tutorial covers key concepts such as translate, rotate, scale, and skew, providing developers and enthusiasts alike with the tools to create visually dynamic and responsive web designs. Whether you're a beginner seeking a quick introduction to CSS transformations or a seasoned developer looking to expand your styling toolkit, this guide offers a concise and accessible walkthrough. Join this tutorial to accelerate your knowledge of CSS transform and bring a new dimension to your web projects with visually compelling and interactive elements.
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 animations
0:53
But in this video, we're specifically going to stick to just the transform property 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 probably
1:22
the easiest to understand, and that is going to be the rotate function. As you can see, there are
1:26
essentially five different variants of rotate. There's just plain rotate, there's rotate 3d
1:31
then there's the x, y, and z variation of this. This is something that you're going to see really
1:36
common with a lot of different transform functions is they're going to have a 2d version, they're
1:39
going to have a 3d version, then they're going to have an x, y, and z version for specifically
1:43
dealing with those one little axis at a time. Generally, you're going to only work with the
1:48
2d version, but sometimes you may want to work with the 3d version or just one axis at a time
1:52
Our case with rotate is just easiest to work with the two-dimensional version of just the rotate
1:56
function. And in here, all you do is you pass in a value of degrees or turns or whatever you want
2:02
So we could say we're going to rotate this by 74 degrees. And now if we click save, you can see the
2:07
box has been rotated 74 degrees, it's at an angle now the text is sideways, and so on, you know
2:12
we can do 90 degrees to get a perfectly, you know, rotated by one quarter, or you can use something
2:18
called turns, we could say 0.75 turn, and that's going to rotate by 90 degrees or a quarter turn
2:24
And if we save, you can see the boxes in the same position, you can use turns, or you can use
2:28
degrees, whichever one's easiest for you to understand. Now, if you wanted to dive into a 3d
2:33
rotation, you could use the rotate 3d function like this, this function is actually quite confusing
2:38
and difficult to use. So I recommend instead just specifying, for example, rotate x, or rotate y
2:43
or rotate z individually. And that'd be how you rotate in three dimensions. So we could rotate by
2:48
point two five turn. And if we save, you can see it looks like the box disappeared. And that's
2:53
because we've rotated in the x direction in the boxes essentially paper thin against the screen
2:57
So if we rotate by, for example, like point oh three turn, and we save or make it a little bit
3:02
larger, we'll do point one three and save, you can see the box looks like it's getting shorter
3:06
And that's because it's rotating away from us. So the top is getting further away from us. And the
3:10
bottom of the box is getting closer. As we get closer to that point two five, you can see the
3:14
box is getting more and more squished, is it's rotating away from us. Same thing with why we can
3:19
change the y rotation here, we'll start with point one three, you can see it looks like the box is
3:23
getting skinnier, we go to point two three, it's again getting skinnier. And that's because it's
3:27
getting further away from us on one side. So the left side is getting further away from us
3:30
while the right 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
3:39
So both of those are the same, you don't have to worry about one or the other rotate x and y are
3:43
the ones that get kind of confusing, because that's when you're rotating into the screen or away from the screen. Generally, I don't ever use these. So 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 0.5. So now our y is half the size it normally is, but our x dimension is 1.5
4:41
times the size it normally is, we can specify x and y both at the same time by using scale
4:46
or we can use for example, scale x, we can say we want to scale the x direction by 0.5, or we can
4:51
do scale y scale the y direction by 0.5. And again, we can do scale z for three dimensional stuff
4:56
but our box right now is not three dimensional. So we don't really have to worry about that. And
5:00
again, that's only useful if you're doing some crazy three dimensional scaling, which for 99
5:05
of use cases, you're probably not the most part, we just want to do is just scale 0.5. There you
5:09
are boxes half the size it normally is, or we can do scale two, and now it's twice the size it
5:14
normally is. Now those are probably the two easiest to understand functions for transform. But by far
5:18
the most useful is going to be the translate function. And translate allows you to move an
5:23
object whether left, right, up, down or back and forth in the z direction. So you have again
5:27
translate translate 3d x, y and z. So by default, we're going to start with translate, let's just
5:32
say that we're going to translate by 20 pixels or 30 pixels, we click Save, and you'll notice the
5:36
box moved to the right by 30 pixels. Without this translate, it's right in the middle. And with it
5:41
you can see it's been moved to the right by 30 pixels. The translate if you pass it one value
5:46
is the exact same as if you did translate x, it's translating in the x direction 30 pixels to the
5:50
right, if we did negative 30 pixels, it's going to translate 30 pixels to the left. So this is
5:55
without translate. And this is with translate, it's moved 30 pixels to the left, we can use positive
6:00
or negative numbers to move our objects based on a set number of pixels. The y direction is the same
6:05
thing, but it's going to be for the y axis. So we move 30 pixels up. Or if we do a positive number
6:10
it's going to move the box down by those 30 pixels. Now if we go back to using the translate function
6:15
we can actually pass this two separate parameters. So we can do 30 pixels, we could do like negative
6:20
40 pixels. What this is going to do is move our box to the right 30 pixels in the x direction
6:24
and it's going to move us up 40 pixels in the y direction, the first value you pass is going to
6:29
be the x direction. The second value you pass is going to be the y direction for the translate
6:33
function. Finally, we have translate z again, but this isn't really going to make much difference
6:38
I could put a large number in here. And if I remove it and save, you're going to notice it doesn't look any different. And that's again, because we're not dealing with three dimensions
6:44
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 100
7:03
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. The first skew, let's just say that we want to skew by 90 degrees. And if we save
9:04
make this actually something more like 30 degrees, you can see that our box has kind of been stretched
9:08
and tilted by about 30 degrees off to the side. And that's why we have this kind of weird shape
9:13
showing up for our box. And this first skew number that you pass is going to be the x direction
9:18
It'd be the same thing as if we did skew x, they both look exactly the same. Now skew y
9:22
is going to be essentially the same thing. But we're skewing in the y direction now instead of the x direction. If you pass two properties to skew, the first one is the x and the second one
9:30
is the y. So we'll do 30. And we'll say 40 degrees here for the y and let's just make it negative
9:35
Actually, you can see we've skewed our box in x and y direction by 30 degrees and 40 degrees
9:40
negative respectively. Now, unlike all the other transform properties, I don't really have very
9:44
many use cases for skew. But when you need it, it's the perfect one for that scenario. The next
9:48
thing I want to talk about is combining together multiple transforms. Because as you can see, we've done certain things, you know, like rotate, you know, 30 degrees or whatever, we haven't
9:56
combined multiple properties together. And the way that you do that inside of CSS is just put them
10:00
all on the same transform. So we'll say rotate 30 degrees, and we'll say scale of point seven
10:06
now we have a rotated and scaled box that is using these two different properties
10:10
we can combine together as many of these as we want. For example, you know, I could say scale x
10:14
by 7.75. I could say translate y by negative 10 pixels, save. And now our box has been scaled
10:23
it's been moved, it's been rotated and all these other things. Now where the difficulty comes is
10:27
when you want to override a transform because a transform is one property. If you override it
10:32
you need to redefine everything inside that property, you can't just override one part of it
10:36
you have to override all of it or none of it. So let's say by default, we're going to have a box
10:40
that's going to have a scale of 1.2. And it's going to be translated in the x direction by
10:46
five pixels, let's just actually make it 50 pixels. So by default, this is what our box
10:50
is going to look like. And then let's just say that we're going to have a class called dot big
10:54
and dot big is going to make our scale larger. So our scale is going to be two. Now you may think
10:59
that's all we need to do. And if we come in here, and we say class of big, you're gonna know
11:04
something interesting, it did scale, but our box is no longer translated by 50 pixels anymore
11:09
we need to make sure we write that translate x of 50 pixels back into here to make sure our box is
11:14
translated and scaled correctly. Same thing if we have a class called move that is going to move our
11:19
box, what we can do is we can say that the translate is going to swap here. So for our transform, oops, transform, we want to make sure that we do is have our translate the x direction
11:32
be negative 50 pixels this time. And if we change our class here from big to move, you're going to
11:37
notice our box is moved the correct direction, but it now lost that scaling of 1.2, we need to make
11:42
sure we put that scale of 1.2 back into there. And then finally, what if we combine together dot big
11:47
and dot move? Well, if we come down here, and we try that out, you're going to notice our box
11:52
only has the classes for dot move, it doesn't have any of our dot big, we need to come in here
11:57
we need to make sure that our transform has the scale of two, and it has the proper translate x
12:02
of negative 50 pixels. And now it's going to have all the different properties we need
12:06
We will notice this is a real pain to work with. We've repeated this scale 1.2. And this translate
12:12
negative 50 pixels all over the place. And if we have like three or four different properties
12:16
we can define the amount of different CSS classes we need to define is going to become astronomical
12:21
So doing your code this way is really painful. But it used to be the only way to do this until we
12:26
got CSS variables. CSS variables make this incredibly easy to work with, though. So if
12:30
you're unfamiliar with CSS variables, I recommend checking out my video on them linked in the cards
12:34
and description first, and then dive into this. What we want to do is take our scale here, we want
12:39
to use a CSS variable for our scale, we'll just call it scale. And by default, we're going to set
12:43
this to 1.2. If it's not defined, same thing with translate x, we want to use a variable, which we're
12:48
just going to call translate x. And by default, we're going to use that 50 pixel value if we don't
12:54
define it. So now, if we get rid of the big and the move class, you're gonna notice our box looks
12:59
exactly like it did before it's in the right place with the right scale. But down here where we have
13:02
our big class, instead of redefining our transform, we're just going to redefine this scale variable
13:07
and set it to two. And we're not even going to touch the transform. And that allows us to change
13:11
just the scale, it's going to get inserted into the variable here without messing with anything else
13:16
Now if I put my big class on there, you're going to notice it still is in the correct position and
13:19
it got twice as big. Now for move again, we're just going to change that translate
13:26
x property, we're going to change it to negative 50 pixels. And now if I put the class of move on
13:33
here, you're going to notice it moved off to the left, but the scaling is still there
13:37
Now for big and move, we don't even need that we can completely get rid of it. And that's because
13:41
and move already take care of the scale and the translate x. If I put the big class on here as
13:46
well, we now have a big box that's also moved in the correct location. And as you can see, our CSS
13:51
is really easy to read, really easy to write. And if we need to add something else, for example
13:55
we needed to add a skew into here, we could just say that our skew is going to be you know, like
14:00
50 degrees. And then up here, we would just add in our skew with a variable for that skew
14:07
And let's just default it to 10 degrees, for example. And now we also have this property
14:11
for skew that's going to work exactly like we want it to. If we come in here and add the skew
14:16
class, you can see it as a much more skewed box and big and moved all at the same time
14:21
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
14:28
really master this tricky section of CSS. If you're interested, I'll link that down in the
14:32
description below for you. Also, with that said, thank you very much for watching and have a good day