2.16 Transform
You use transform to rotate, move and scale your elements. And even more.
To rotate you will write
transform: rotate(30deg);
To move you will write
transform: translate(200px);
To scale you will write
transform: scale(1.5);
Tip: if you want to scale it smaller, use a number less than 1. Like 0.8 or 0.7…
And if you want to move, scale and rotate at the same time you would write like these
transform: translate(200px) scale(1.5) rotate(30deg);
🙂 If you write another transform property on another line it will
overwrite it.
And also, if you want you can use the three axes (plural form of axis). They are x, y and z.
So, if I just write a value, it will only translate in the x-axis. And if I write two values with a
comma in between, it will translate in x and y-axis. And if you use three it will move in the x, y and z axis.
transform: translate(x, y, z);
When you translate, scale or rotate you can also call individual axes like these.
transform: translateY(200px) scaleY(300px);
This will make the element only move 200px on the y-axis and also be scaled 300px in the y-axis.
Tip: You won't need z-axis that much in translate and scale unless you are using 3d. But for rotate, the default value is the z axis.