CSS Transforms Cheatsheet
šØ CSS Transforms Cheatsheet
CSS transforms let you change an element's position, size, rotation, or shape without affecting document flow.
Transforms are also GPU-accelerated, so they are commonly used to create smoother animations and interactive UIs.
ā Common Transform Functions ā translateX(): Moves an element along the X axis. ā translateY(): Moves an element along the Y axis. ā translate(): Moves an element along both X and Y axes. ā scale(): Scales an element uniformly on both axes. ā scaleX(): Scales an element along the X axis. ā scaleY(): Scales an element along the Y axis. ā rotate(): Rotates an element around its origin. ā skewX(): Skews (shears) the element along the X axis. ā skewY(): Skews (shears) the element along the Y axis. ā skew(): Skews the element along one or both axes. ā matrix(): Applies a 2D transformation defined by a matrix.
#CSS #WebDev #Frontend #Transforms #UIDesign
Common Transform Functions
| Function | Description |
|---|---|
translateX | Moves the element along the X axis. |
translateY | Moves the element along the Y axis. |
translate | Moves the element along both X and Y axes. |
scale | Scales the element uniformly on both axes. |
scaleX | Scales the element along the X axis. |
scaleY | Scales the element along the Y axis. |
rotate | Rotates the element around its origin. |
skewX | Skews (shears) the element along the X axis. |
skewY | Skews (shears) the element along the Y axis. |
skew | Skews the element along one or both axes. |
matrix | Applies a 2D transformation defined by a matrix. |
translateX()
Moves an element along the X axis. Accepts lengths or percentages. Percentages are relative to the element's own size.
Positive values move right, negative values move left.
div {
transform: translateX(50px);
}transform: translateX(50px)
transform: translateX(-50px)
transform: translateX(100%)
transform: translateX(-25%)
translateY()
Moves an element along the Y axis. Accepts lengths or percentages. Positive values move down, negative values move up.
transform: translateY(-20px)
transform: translateY(50px)
transform: translateY(100%)
translate()
Moves an element in both X and Y axes. Accepts one or two values.
transform: translate(30px, 20px)
transform: translate(50%, 50%)
scale()
Scales an element uniformly in both X and Y directions.
transform: scale(1.2)
transform: scale(0.8)
scaleX()
Scales an element only on the X axis.
transform: scaleX(1.5)
transform: scaleX(0.5)
scaleY()
Scales an element only on the Y axis.
transform: scaleY(0.5)
rotate()
Rotates an element around the transform origin.
transform: rotate(45deg)
skewX()
Skews an element along the X axis.
transform: skewX(20deg)
transform: skewX(-20deg)
skewY()
Skews an element along the Y axis.
transform: skewY(-6deg)
transform: skewY(6deg)
skew()
Skews an element along both axes.
transform: skew(20deg, 10deg)
matrix()
Applies a custom 2D matrix transform.
/* matrix(a, b, c, d, tx, ty) */
.element {
transform: matrix(
1,
0,
0,
1,
30,
20
); /* identity matrix + translate(30px, 20px) */
}A 2D matrix maps to the 3x3 transform matrix used by the browser:
[ a c tx ]
[ b d ty ]
[ 0 0 1 ]| Parameter | Position in matrix | Description | Example effect |
|---|---|---|---|
a | row 1, column 1 | Horizontal scale and X component of rotation. Values >1 scale wider; values between 0 and 1 shrink. | 1 (no horizontal scale) |
b | row 2, column 1 | Y component of rotation and vertical skew. Non-zero values introduce shearing/rotation. | 0 |
c | row 1, column 2 | X component of rotation and horizontal skew. Non-zero values introduce shearing/rotation. | 0 |
d | row 2, column 2 | Vertical scale and Y component of rotation. Values >1 scale taller. | 1 (no vertical scale) |
tx | row 1, column 3 | X translation (in CSS units). Moves the element horizontally. | 30 ā translateX(30px) |
ty | row 2, column 3 | Y translation (in CSS units). Moves the element vertically. | 20 ā translateY(20px) |
Full-Stack AI Developer Roadmap
From HTML & CSS to working with AI models, all in one structured roadmap.