CSS — Part-7- Transform

CSS transforms allow you to move, rotate, scale, and skew elements.
It modifies the coordinate space of the CSS visual formatting model.

A transformation is applied to the coordinate system an element renders into through the transform property.

2D Transform Methods

The methods for 2D Transforms are —

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

The translate() Method

• The translate() method moves an element from its current position to top/left/bottom/right (according to the parameters given for the X-axis and the Y-axis).
• These values would be any length value, like 10px or 2.4em

div {
  transform: translate(50px, 100px);
}

The rotate() Method

• The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.
• Using negative values will rotate the element counter-clockwise.

div {
  transform…