CSS Transform

By Tony 9.5.2024

CSS transform is a relatively new and very powerful and versatile way to move the elements around, rotate them, and do all sorts of stuff involving the properties of the element. Let's dive in and see what CSS transform can do!

To use the CSS transform feature, simply use the "transform" property, followed by the value functions (we introduced these in the CSS Math article) of the effects you want to apply to the element. In this case, it's translate, rotate, and scale. The first function, translate, moves the element. In this function, there are 2 values. The frist value, 100px, sets the movement on the horizontal axis, meaning the element is moved to the right by 100 pixels. The second value, 50px, sets the vertical axis movement, which is 50 pixels down in this case. The second function in this rule, rotate, rotates the element clockwise. The value in it (45deg) tells the browser to rotate the element by 45 degrees clockwise. The final function, scale, scales the element according to the value in it. 1 is original size, 2 is double, 3 is triple, and so on. In this case, it scales the element to double its original size.

As you can see from the example above, we set the element's size, background color, and gave it a font size. Then, we used the transform property to move the element 100 pixels right and 50 pixels down, rotated it by 45 degrees, and doubled its size. Note that for translate and rotate functions, you can set negative values. For example, translate(-50px, -100px) moves the element 50 pixels left and 100 pixels up (inverse); and rotate(-90deg) rotates the element 90 degrees counterclockwise. You can also set decimal values for the scale function, meaning that scale(0.5) scales the element by half. Feel free to play around with the values in the example above and see what transform can do as this is the best way to learn how they work!