CSS transform functions

Function	Description	Example
`translate(x, y)`	Move element	`translate(50px, -20px)`
`scale(x, y)`	Resize element	`scale(1.5)` or `scale(2, 0.5)`
`rotate(angle)`	Rotate around origin	`rotate(45deg)`
`skew(x, y)`	Shear/tilt element	`skew(15deg, 5deg)`
`scaleX(n)` / `scaleY(n)`	Scale on single axis	`scaleX(-1)` (mirror)
`matrix(a,b,c,d,e,f)`	2D transformation matrix	Combines all transforms
`perspective(d)`	Apply 3D perspective	`perspective(500px)`
`rotateX(a)` / `rotateY(a)`	3D rotation	`rotateY(60deg)`

Transform origin

By default, transforms are applied relative to the element's center (50% 50%). Use transform-origin to change the pivot point: transform-origin: top left rotates from the top-left corner.

transform-origin

The transform-origin property changes the point around which transforms are applied. By default, it's the element's center (50% 50%), but you can set it to any position:

.box {
  transform: rotate(45deg);
  transform-origin: top left; /* Rotates around top-left corner */
}

Common values: center (default), top left, bottom right, 0 0 (same as top left), 50% 100% (bottom-center). This is essential for rotation and scaling effects where the pivot point matters visually.

3D transforms

CSS supports 3D transformations that move elements along the Z-axis:

perspective(d) - Applies a perspective view from a distance d. Must be the first transform in the chain. Example: transform: perspective(500px) rotateY(45deg).
rotateX(a), rotateY(a), rotateZ(a) - Rotate around the X, Y, or Z axis.
translate3d(x, y, z) - Move in 3D space. translateZ(0) is a hack to force GPU compositing.
scale3d(x, y, z) - Scale in 3D.

Performance tip: Using transform: translateZ(0) or will-change: transform promotes an element to its own compositing layer, enabling GPU acceleration. This is particularly useful for elements that will be animated frequently.

Matrix transform explainer

The matrix(a, b, c, d, e, f) function is a low-level 2D transformation defined by a 3×3 matrix. The six values map to this transformation:

x_new = a * x + c * y + e
y_new = b * x + d * y + f

a, d - scaling along X and Y
b, c - skewing
e, f - translation along X and Y

Every translate(), scale(), rotate(), and skew() can be expressed as a matrix. Browsers convert all transforms to matrices internally for performance. You rarely write matrices by hand, but understanding them helps debug complex transform chains.