CSS Transforms

CSS transforms allow you to rotate, scale, skew, and translate elements in 2D and 3D space.

2D Transforms

translate() moves elements along X and Y axes.

rotate() rotates elements by specified degrees.

scale() resizes elements.

skew() distorts elements along axes.

Multiple transforms can be combined.

/* Transform functions */
.translate {
  transform: translate(50px, 100px);
}

.rotate {
  transform: rotate(45deg);
}

.scale {
  transform: scale(1.5);
}

.skew {
  transform: skew(10deg, 5deg);
}

/* Combined transforms */
.combined {
  transform: translate(50px, 0) rotate(15deg) scale(1.2);
}