2D Transforms

What are 2D Transforms?

2D transforms let you manipulate elements in two-dimensional space. You can rotate, scale, move, and skew elements without affecting the document flow. Perfect for animations, hover effects, and creative layouts.

Key Advantage: Transforms are hardware-accelerated and don't trigger layout recalculations, making them very performant.

rotate()

Rotates an element around a fixed point.

Values: Degrees (deg), turns (turn), radians (rad)

Example: rotate(90deg) rotates 90 degrees clockwise

Negative values: Rotate counterclockwise

scale()

Increases or decreases element size.

One value: Scales both width and height equally

Two values: scale(x, y) - horizontal and vertical separately

Example: scale(2) doubles the size, scale(0.5) halves it

translate()

Moves an element from its current position.

Values: translate(x, y)

Example: translate(50px, 100px) moves 50px right, 100px down

Individual axes: translateX(50px) or translateY(100px)

Centering trick: translate(-50%, -50%) with position: absolute

skew()

Tilts an element along the X or Y axis.

Values: skew(x-angle, y-angle)

Example: skew(20deg) tilts horizontally

Individual axes: skewX(20deg) or skewY(10deg)

transform-origin

Sets the point around which transformations occur.

Default: center center (50% 50%)

Values: Keywords (top, bottom, left, right, center) or percentages/pixels

Example: Rotate from top-left corner instead of center

Multiple Transforms

Combine multiple transform functions in one declaration.

Order matters: Functions apply from right to left

Example: Element is first translated, then scaled, then rotated