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 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
CSS transforms allow you to visually manipulate an element by skewing, rotating, translating, or scaling it. You can combine multiple transforms for powerful effects.
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(50px)
scale()
Scales an element uniformly in both X and Y directions.
transform: scale(1.2)
scaleX()
Scales an element only on the X axis.
transform: scaleX(2)
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)
skewY()
Skews an element along the Y axis.
transform: skewY(-10deg)
skew()
Skews an element along both axes.
transform: skew(20deg, 10deg)
matrix()
Applies a custom 2D matrix transform.
transform: matrix(1, 0, 0, 1, 30, 20)
Notes
- Transforms do not affect the document flow (the space taken by the element).
- Use
transform-originto change the point around which transforms are applied (default is the element's center). - Transforms can be animated with CSS transitions or keyframes for smooth effects.