Up next in 10
CSS Transform Is Dead! Use This Instead
554 views
Feb 7, 2024
"CSS Transform Is Dead! Use This Instead" is a provocative and informative video challenging the conventional use of CSS transforms and proposing an alternative technique. The video presents a new approach or method that can achieve similar or better results compared to using CSS transforms. Viewers are guided through the drawbacks of CSS transforms and introduced to the advantages of the alternative method. The tutorial provides practical demonstrations and explanations to illustrate how to implement this new technique effectively in web design projects. By watching this video, viewers gain insights into innovative solutions and strategies for achieving desired visual effects in CSS styling. Whether you're a beginner or an experienced developer, this video offers valuable insights into optimizing your CSS workflow and staying updated with the latest techniques in web development.
View Video Transcript
0:00
After watching this video, you're never going to want to use the CSS Transform property ever again
0:08
Welcome back to WebDev Simplified. My name is Kyle, and my job is to simplify the web for you
0:13
so you can start building your dream project sooner. And the claimant this video may seem really bold
0:17
but I can promise you, you're not going to want to go back to using Transform after watching this video
0:22
And that's because CSS introduced three new properties, the rotate, translate, and scale property
0:27
And you're probably already familiar with these concepts from the Transform property, but CSS took those properties, made them their own properties not at all inside of Transform
0:36
And this makes using Transforms so much easier. I'm going to explain more at the end of this video why this is so monumental
0:42
But at the beginning, I kind of want to explain how to use these different properties. So normally, if you would want to change a box, for example, you want to scale it to be smaller, you would say transform, give it a scale of 0.5
0:53
And now if we save this, our box you can see is 50% smaller. or we can make it twice as big bikes, so we're doing a scale of two, and now it's overflowing
1:00
off the edge of my screen. Also, you could come in here, and you could say that you want to do Translate
1:04
So let's do a Translate where we want to move it like 50 pixels, for example. So if we just save this, you can see it moves 50 pixels to the right, and we can also, for example
1:12
move it 50 pixels down by doing 50 pixels here. And finally, the last thing we could do is rotate
1:17
For example, I could rotate this 45 degrees, and now you can see it's rotated by 45 degrees
1:22
This is a really common way to use these properties, but with this new CSS, we can actually
1:26
just write our rotation or our transforms or our scales like this we can say scale and then we can say two
1:31
and now our box is twice as big or 0.5 and now it is half the size that it used to be this is super
1:37
amazing and really useful so i'm going to go through each of the three different properties how to use them
1:41
and then at the end i going to be talking about why this is so great so with scale it really straightforward there only a few ways to use this you specify one value like this it scales all of the sides If we specify two values for example 1 and 0 now it going to scale the vertical orientation by 0
1:57
and the horizontal orientation by 1. So this first number is the x-axis, and this second number is the y-axis
2:04
If we were in three-dimensional space, for example, we could put a value here, and now this is going to scale our box in that z-dimension, if you were doing a 3-D scale
2:11
but our box is one dimension or two-dimensional, so this doesn't do anything. Now let's move on here to translate
2:17
Translate, it's very similar to scale. If we'd give it one value, for example, 50 pixels
2:21
it's going to move our box 50 pixels to the right. You can see if I comment that out, it put it back in, it moved 50 pixels to the right
2:27
If we specify a second value, that's going to be for the Y direction, so we moved our box 100 pixels down and 50 pixels to the right
2:34
And then finally, I can come in here and say like 25 pixels in the Z direction. And again, if we had a three-dimensional layout
2:39
this would be a 3D transform, where it's moving my box towards us by 25 pixels
2:44
that doesn't really matter though because we again are working in two dimensions. Now finally rotate is a little bit different
2:50
If we just specify a normal rotate like 45 degrees like this
2:54
that is going to rotate our box in the normal rotational direction
2:58
But what if we wanted to rotate our box in three-dimensional space? There's a few ways to do that
3:03
We could say we want to rotate, for example, in the x-axis. We would say rotate x 45 degrees and now that's going to rotate in the x direction
3:09
And you can see by doing that our box actually looks like it got shorter and that's because it's essentially rotating away from us and towards us
3:15
We can also do the Y direction, and that's going to be rotating towards us and away from us in the other direction
3:20
which again is why it looks like it got smaller. And then the Z axis is just like normal rotate, and you can see it's rotating around this axis that we're looking at
3:28
Also, you can do this fancy thing called rotate 3D, where you specify three different matrix values here
3:34
and then you specify a rotation value for example 45 degrees and that going to give you a rotation in all the different directions For example we could emphasize it by saying this one going to be zero so now it going to only rotate in these two directions by 45 degrees It kind of complex You probably
3:47
never going to use it because you don't really deal with 3D rotation, but these are all the different
3:51
ways you can use these properties, and they map pretty much one to one to how you would use them
3:55
inside of a transform. So this really simply is how you use these properties, but why are they
3:59
so important? Let me show you just a few examples. Here's some really simple code where I have
4:04
a two extra classes I added, I just added a small class and a moved class, and when I have
4:08
the small class being applied, I reduce my scale by 50%, and the moved class moves us 50 pixels
4:13
to the right. So they come in here and we add the small class to our box, you can see that
4:18
it has gotten small. If we add the moved class, you can see that it has moved to the right 50 pixels
4:22
What happens if we add both the small and the moved class? You'll notice it doesn't actually get
4:27
small. All it does is apply this final transform. And that's because since transform is a single
4:32
property, this transform right here is overriding everything from this transform instead of combining
4:37
them both together. This is really annoying, but luckily if we just used scale here, and we wrote this as
4:42
0.5, and here instead we wrote translate, and we just put this as 50 pixels. Now, if we just put that
4:49
colon in there, and we save, we can see we get a small box that's also been translated by 50 pixels
4:54
Now, this is technically something you could have solved using CSS variables, but not needing
4:59
to use CSS variables is super nice and this is way handier. And there's another example I'm
5:03
going to show you just in a second that actually cannot be solved in any other way than using
5:08
these new CSS properties. So again, I've changed my code slightly and we're actually using
5:13
CSS variables. So you'll notice we have the small and the moved class applied to our box
5:18
and it's actually properly scaling and translating because we're using CSS variables and we only
5:22
have one transform to find We also have another thing added on here When I hover over my box I want to play an animation that going to rotate it from zero degrees to 45 degrees and then rotate back and forth as long as I hovering over it But when I hover my box you notice we get a really janky animation that kind of just
5:37
automatically changes from one state to the other state and back. And the reason for that is because you cannot animate CSS variables
5:44
It just doesn't work. It'll just automatically jump from one value to the next. So you cannot do this at all with the code as it is written
5:51
But what we could do is we could use the rotate property. For example, we just changed us to the rotate property here, and up here we'll get rid of this
5:59
transform code, change this to the scale property, change this to the translate property, and now
6:04
if I save and I hover over this, you're going to notice it's doing the animation correctly
6:08
As you can see, it's rotating, rotating back and forth every 500 milliseconds. It's doing exactly what I would expect it to do
6:14
So this is really nice because now we can do things that were impossible before, and best of all
6:19
it's making all of our existing CSS code so much easier. We don't have to worry about weird CSS variables
6:24
We can just say scale the box, translate the box, rotate the box. Now the only thing you cannot do is you cannot do skews or perspective inside of their own properties
6:34
There is technically a perspective property, but it acts a little bit differently than the transform version
6:39
So you could do transform or skew here and transform perspective. Those are the only two things you really cannot do with these current existing properties
6:46
But honestly, 99% of the time, I just scale, translate, rotate. I never mess with skew and I never mess with perspective
6:52
Also, if you're worried about browser support, this feature just launched in all the major
6:57
browsers a couple weeks ago, so give it a few more weeks and hopefully everyone will have
7:01
those browsers downloaded and you should be able to use this in all of your modern CSS projects
7:06
This honestly has me so excited to explore and see what I can do with these new CSS properties
7:11
and if you want to be on the cutting edge of CSS, make sure you check out some of my recent
7:15
videos that cover the most advanced CSS, they're going to be linked right over here
7:19
With that said, thank you very much for watching and have a good day