You will learn how to change the element's size, shape, and position.

2D Transformations:

• Translation (Move):
  • You can move an element horizontally and vertically using the translate function.
  •  For example, transform: translate(10px, 20px); move the element 10 pixels to the right and 20 pixels to down.
• Rotation:
  • You can rotate an element using the rotate function.
  •  For example, transform: rotate(45deg); rotate the element 45 degrees clockwise, add a negative sign to rotate anti-clockwise.
• Scaling:
  • You can increase or decrease the size of an element using the scale function.
  • For example, transform: scale(1.5); scales the element to 150% of its original size.
• Skewing:
  • Change the shape of an element by slanting it along the x-axis, y-axis, or both using the skew function.
  •  For example, transform: skew(20deg, 20deg); skews the element 20 degrees along the x-axis and 20 degrees along the y-axis.
• Multiple Transformations:
  • You can combine multiple transformations in a single transform property declaration.
  • For example, transform: translate(20px, 30px) rotate(45deg) scale(1.5); apply translation, rotation, and scaling simultaneously.

See the complete code: codepen

Transform Origin:

• It is a point that a transform takes as a reference when it works. simply a point where the transform is applied first.
• The transform-origin property lets you specify the point around which transformations are applied.
•  For example, transform-origin: top left; makes transformations from the top-left point of the element.
• we can set in percentage and pixel as well transform-origin: 50% 50%;

See demo: codepen