CSS 2D Transforms
It allows you to move, rotate, scale, and skew elements.
1. Rotate -
This example will rotate the div by 45 degrees clockwise. The center of rotation is in the center of the div, 50% from left and 50% from top. You can change the center of rotation by setting the transform-origin property.
The above example will set the center of rotation to the middle of the right side end.
2. Scale -
This example will scale the div to 100px * 0.5 = 50px on the X axis and to 100px * 1.3 = 130px on the Y axis. The center of the transform is in the center of the div, 50% from left and 50% from top.
This example will skew the div by 20 degrees on the X axis and by - 30 degrees on the Y axis. The center of the transform is in the center of the div, 50% from left and 50% from top.
4. Multiple transforms
This will rotate the element 15 degrees clockwise and then translate it 200px to the right.