What are Transformations ?
In Math, A transformation is a general term for four specific ways to manipulate the shape of a point, a line, or shape. The original shape of the object is called the pre-image and the final shape and position of the object is the image under the transformation.
In CSS, The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. As shown in the above examples.
In this Article we are going to understand the 3 basics of CSS Transformation that is Scale, Translate and Rotate.
Scaling Basically means to increase or decrease the size of an object by moving the points (x and y) exponentially i.e. the scale factor will always be the same.
You can change the values of scale function of the transform property and get different results.
In the purple box i’ve added a scale-in flavor whereas in the blue box i used scale-out.
Translate means to move the points of an object in x or y or both.Every Point of the shape must move in the same direction and same distance .Lets see some examples.
"Rotation" means turning around a center. The distance from the center to any point on the shape stays the same.
Clock & Anticlockwise
In the first one the orange box is set to rotate 180 degree in Clockwise. The Second box is set to rotate 180 degree in Anticlockwise.