Transform

CSS transform property allows you to apply various transformations to an element. These transformations can modify the position, shape, and orientation of an element. Below are the commonly used transform functions:

1. Rotate
   The rotate function rotates an element around a fixed point (the element’s origin) by a specified angle. The angle is typically given in degrees (deg).
2. Scale
   The scale function resizes an element. You can scale an element proportionally (uniform scaling for both width and height) or non-proportionally (separate scaling for width and height).
3. SkewX
   The skewX function slants or skews an element along the X-axis by a specified angle. It does not change the element’s position but distorts its shape.
4. SkewY
   The skewY function skews an element along the Y-axis by a specified angle, similar to skewX(), but applied vertically.
5. TranslateX
   The translateX() function moves an element along the X-axis by a specified distance. This is useful for shifting elements horizontally.
6. TranslateY
   The translateY() function moves an element along the Y-axis by a specified distance. This is useful for shifting elements vertically.

Transform Origin

The transform-origin property defines the origin point around which transformations like rotate, scale, skew, and translate occur. By default, transformations happen around the center of the element, but you can change the origin point to any other position (top, bottom, left, right, or custom coordinates).