CSS Transforms

CSS transforms move, rotate, resize, or tilt an element without changing the normal document flow.

Core Transform Functions

.move {
  transform: translate(40px, 20px);
}

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

.resize {
  transform: scale(1.2);
}

.tilt {
  transform: skewX(15deg);
}

• translate() moves an element along the X and Y axes.
• rotate() turns an element; positive degrees rotate clockwise.
• scale() enlarges values above 1 and shrinks values below 1.
• skew() tilts an element along an axis.

Combining Transforms

Place multiple functions in one transform declaration. Their order matters because each function changes the coordinate system used by the next.

.card {
  transform: translateY(-4px) rotate(2deg) scale(1.05);
}

Transform Origin

transform-origin sets the point around which an element rotates or scales. The default is its centre.

.door {
  transform-origin: left center;
  transform: rotate(20deg);
}

Practical Hover Effect

.button {
  transition: transform 0.2s ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-3px) scale(1.03);
}

• Prefer transform for motion because it does not reflow surrounding content.
• Keep interactive effects subtle and provide the same feedback for keyboard focus.
• Avoid heavy skewing or scaling that makes text difficult to read.