CSS Transform Guide Part 1

We use the transform feature mostly to create animations and sometimes to reposition certain elements. In this guide, we will examine three different methods of the transform property. These methods are translate, scale and rotate.

Translate does a two-dimensional translation. Actually, this means repositioning your element based on its current position. Using this feature, you can move your elements wherever you want.

Scale changes the size of your element according to the scale you give it. The default value of this property is 1. When you give 2, your element grows 100% with all the children it has. When you give 0.5, the size is reduced by 50%.

You can also use the scale property separately for the X and Y planes. This is not an aesthetic way of resizing, however there are times when it is useful.

Rotate lets you rotate your element. You can rotate your element using deg or turn unit. When we use the deg unit, 360 is the maximum value for our element to rotate 1 turn around itself. But by going above this number, we can rotate our element as many times as we want. When you use the turn unit, the value 1 is the maximum value for our element to rotate 1 turn.

@aykutkardas