CSS Transforms

What is transform in CSS?

The transform property allows you to apply 2D or 3D transformations to HTML elements like:

• Move (translate)
• Resize (scale)
• Rotate (rotate)
• Skew (skew)

Common Transform Functions

1. translate(x, y)

• Moves the element on the X and/or Y axis.
• transform: translate(50px, 20px);
• Moves 50px right, 20px down.

2. scale(x, y)

Resizes the element. transform: scale(1.5); Enlarges element to 1.5× its size.

3. rotate(deg)

Rotates the element. transform: rotate(45deg); Rotates 45 degrees clockwise.

4. skew(x, y)

Slants the element. transform: skew(20deg, 10deg); Skews horizontally by 20° and vertically by 10°.

5. matrix()

Combines all transforms in one function (less commonly used).

.box {
  width: 100px;
  height: 100px;
  background: skyblue;
  transform: translateX(50px) scale(1.2) rotate(15deg);
}

This moves the box 50px right, enlarges it by 20%, and rotates it 15°.

Combine with transition for Animation
box {
  transition: transform 0.3s ease;
}
.box:hover {
  transform: scale(1.2) rotate(10deg);
}