CSS Transform Property

The transform property in CSS allows you to apply various transformations to elements, such as moving, rotating, scaling, and skewing them. It provides a way to visually manipulate elements in 2D or 3D space.

element {
  transform: transformation-function(value);
}

Common Transformation Functions:

1 . translate(x, y): Moves the element from its original position.

• x : Horizontal movement (positive moves right, negative moves left).
• y : Vertical movement (positive moves down, negative moves up).

.element-example {
  transform: translate(50px, 100px); /* Moves 50px right, 100px down */
}

2 . scale(x, y): Scales the size of the element.

• x: Scale factor horizontally.
• y: Scale factor vertically (optional, defaults to x if not specified).

.element-example {
  transform: scale(1.5, 1.5); /* Increases size by 1.5 times */
}

3 . rotate(angle): Rotates the element around its center.

• angle: Rotation in degrees (deg).

.element-example {
  transform: rotate(45deg); /* Rotates 45 degrees clockwise */
}

4 . skew(x-angle, y-angle): Skews the element along the X and Y axes.

• x-angle: Skew along the X-axis.

• y-angle: Skew along the Y-axis.

.element-example {
  transform: skew(
    20deg,
    10deg
  ); /* Skews 20 degrees along X-axis, 10 degrees along Y-axis */
}