2D Transforms

The transform property moves, rotates, scales, or skews an element visually, without affecting the layout space it occupies or triggering the layout recalculations that changing top/left/width would cause.

.move    { transform: translate(20px, 10px); } /* shifts right and down */
.rotate  { transform: rotate(15deg); }
.scale   { transform: scale(1.2); }             /* 120% of original size */
.skew    { transform: skew(10deg, 0deg); }

/* Combining multiple transforms in one declaration */
.combo {
  transform: translateX(20px) rotate(10deg) scale(1.1);
}

• translate(x, y) — moves the element without affecting surrounding layout (unlike changing margin or position, which can shift neighboring elements). translateX() and translateY() move along a single axis only.
• rotate(deg) — rotates around the element's center by default.
• scale(n) — resizes the element; values above 1 enlarge, below 1 shrink. scaleX()/scaleY() scale a single axis independently.
• skew(x, y) — slants the element along one or both axes, useful for stylized card or banner effects.

When combining multiple transform functions in a single declaration, order matters — translateX(50px) rotate(45deg) moves the element first and then rotates it around its new position, while rotate(45deg) translateX(50px) rotates first, changing which direction the subsequent translate actually moves along.

transform-origin changes the pivot point for rotation and scaling (default is the element's center):

.corner-rotate {
  transform-origin: top left;
  transform: rotate(45deg);
}

Transforms are commonly combined with transition for smooth hover effects, since transform is one of the two properties (along with opacity) browsers can animate most efficiently.