Transform and Scale Elements in 2D Space with the transform CSS Property

Rotate Elements in 2D with the transform CSS Property

Translate Elements in 2D with the transform CSS Property

Skew Elements in 2D with the transform CSS Property

Change Elements Smoothly and Gradually with the CSS Transition Property

Learn CSS Animations for a Better User Experience 

In this lesson we are going to look at what you can do with scale. We will look at how to scale elements on the X axis, on the Y axis and what happens if you scale on both. 

Christina Gorton: [0:00] In my CodeSandbox, I have an index.html that has an svg in it. This is the svg that we're going to try to scale. Inside of our CSS here, we can see that there's already a transform here, which I'm going to take off. We'll see that it has a max-width of 200 pixels.

[0:21] Let's try to scale it up and down. Going back to our svg, we can put in transform as our CSS property. Then we can choose to scale it. You'll see here that you could scale, scale3d, scaleX, Y, or Z. We're going to focus on scale, scaling Y and scaling X.

[0:45] Within this, I can put a number. If I start with 1, and it saves, we're not going to see anything happen, because it's scaling up one times its size. One times its size would just be 200 pixels. If I go up a little or a lot, in this case, if I put a 2, we're going to see it scale up to two times its size.

[1:07] If you want to go down, you can do a smaller number than 1. We could do something like .5, and it would be half of its size. Now our little egg is a lot smaller. This is happening on both what's called the X and the Y-axis. The X-axis goes horizontal, left to right, and the Y-axis goes up and down vertically.

[1:30] If we wanted to just scale one of them, we could put the X or the Y right after scale, like this. Now, it's still one times its size on the Y-axis, but it's smooshing itself on the X-axis, that horizontal plane there. If we wanted to go up, again, let's try to go up just a little bit, 1.4, we're going to see it stretch on that horizontal plane.

[1:54] If I did this on the Y, you're going to see it stretched the other way, or shrink the other way.

[2:05] If you wanted to try to do both, say before we were doing scale and it was scaling both of them down, this is scaling on the X and the Y-axis down. If we wanted to change that so that it was a little bit, you could do the X and the Y.

[2:18] If you have the first one here, is your X and then you put in another number like I do, .8, it's going to shrink on the X-axis, .5 and on the Y, .8. You have the flexibility to do both.

Course

Learn CSS Animations for a Better User Experience

Transform and Scale Elements in 2D Space with the transform CSS Property

Share this video with your friends