2d Transforms in CSS
2D Transforms in CSS allow you to apply transformations like rotating, scaling, translating (moving), and skewing elements in two-dimensional space (X and Y axes).
? Common 2D Transform Functions:
| Function | Description |
|---|---|
translate(x, y) | Moves the element from its current position. |
rotate(angle) | Rotates the element clockwise (use negative for CCW). |
scale(x, y) | Resizes the element. 1 = original size. |
skew(x-angle, y-angle) | Skews (slants) the element along X and/or Y. |
matrix(a, b, c, d, e, f) | Combines all 2D transforms into one function. |
? Examples:
1. Translate
.box { transform: translate(50px, 20px);}Moves the box 50px right and 20px down.
2. Rotate
.box { transform: rotate(45deg);}Rotates the box 45 degrees clockwise.
3. Scale
.box { transform: scale(1.5, 1.5);}Scales the box to 150% of its original size.
4. Skew
.box { transform: skew(30deg, 10deg);}Skews the box 30° along the X-axis and 10° along the Y-axis.
5. Matrix
.box { transform: matrix(1, 0.3, 0.2, 1, 20, 10);}Applies a combination of scale, skew, and translate using matrix values.
? Combining Multiple Transforms
.box { transform: translate(50px, 0) rotate(30deg) scale(1.2);}? Notes:
transformis supported in all modern browsers.Transforms don't affect the document flow.
Often used with
transitionoranimationfor effects.
Want a visual demo or use case?
