CSS 2D Transforms — translate, rotate, scale, skew

What are 2D Transforms?

CSS 2D transforms let you move, rotate, scale, or skew an element in a two-dimensional plane. They change how an element is rendered visually without necessarily changing the surrounding document flow.

Transforms are commonly used for hover effects, UI feedback, micro-interactions, and visual positioning tweaks.

Core Transform Functions

Function	Purpose	Example
`translate()`	Moves an element	`transform: translate(20px, 10px);`
`rotate()`	Rotates an element	`transform: rotate(15deg);`
`scale()`	Resizes an element visually	`transform: scale(1.1);`
`skew()`	Tilts an element	`transform: skew(10deg, 0);`

Practical Examples

Common 2D transform patterns

.card:hover {
    transform: translateY(-6px);
}

.logo:hover {
    transform: rotate(8deg);
}

.button:hover {
    transform: scale(1.05);
}

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

Combining Transforms

You can combine multiple transform functions in a single declaration. They are applied from right to left, so order matters.

Combining motion and scale

.product-card:hover {
    transform: translateY(-8px) scale(1.02);
}

Best Practices

Pair transforms with transition for smooth interactions.
Keep hover transforms subtle so the interface feels polished, not jumpy.
Use transform-origin when rotation or scaling should happen from a specific edge or corner.
Remember that transforms are visual, so surrounding elements will not reflow around them.

FAQ

Frequently Asked Questions

Because translate(), rotate(), and scale() are applied in sequence, and changing the order can produce a different visual result.

For most UI motion, transform is the better choice because it is smoother and avoids layout recalculation.

Key Takeaways

2D transforms visually move, rotate, scale, or skew elements.
Common functions include translate, rotate, scale, and skew.
Multiple transforms can be combined in one declaration.
Transform order matters because functions are applied in sequence.
Transforms work especially well with transitions for hover effects and micro-interactions.