CSS 2D Transforms

2D Transforms

CSS 2D transforms let you move, rotate, and resize elements without affecting the normal document flow. Transforms are applied visually and do not change the space the element occupies.

The most common 2D transform functions are:

• translate() – move an element
• rotate() – rotate an element
• scale() – resize an element
• skew() – tilt an element

Basic examples:

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

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

.combo {
  transform: translateX(20px) rotate(10deg);
}

Tip: When combining multiple transforms, order matters. For example, rotating first and then translating can produce a different result than translating first and then rotating.

You can also control the pivot point using transform-origin:

.pivot {
  transform-origin: left top;
  transform: rotate(12deg);
}

2D Transform Scale

The scale() function resizes an element. Values greater than 1 enlarge it, and values between 0 and 1 shrink it.

.scale-up {
  transform: scale(1.1);
}

.scale-down {
  transform: scale(0.9);
}

You can scale only one axis:

.scale-x {
  transform: scaleX(1.2);
}

.scale-y {
  transform: scaleY(0.8);
}

Common UI use: hover interactions for buttons/cards.

.card {
  transition: transform .2s ease;
}

.card:hover {
  transform: scale(1.03);
}

Tip: Transforms are usually smoother than changing width/height because they can be GPU-accelerated in many browsers.

Skew / Matrix

skew() tilts an element along the X and/or Y axis.

.skew-x {
  transform: skewX(15deg);
}

.skew-y {
  transform: skewY(10deg);
}

.skew-both {
  transform: skew(12deg, 6deg);
}

matrix() is the most advanced 2D transform function. It combines translate, rotate, scale, and skew into one function.

/* matrix(a, b, c, d, tx, ty) */
.matrix {
  transform: matrix(1, 0.2, 0.2, 1, 20, 10);
}

In practice, matrix() is rarely written by hand. It is usually generated by tools, animations, or complex transform calculations.

Summary

• 2D transforms change an element visually without affecting layout flow.
• Use translate, rotate, and scale for most UI work.
• transform-origin controls the pivot point.
• skew tilts elements; matrix is an advanced combined transform.