The transform property changes an element's shape, size, or position visually, without pushing surrounding elements around the way changing width or margin would.
.box {
transform: translate(50px, 20px); /* right 50px, down 20px */
transform: translateX(50px);
transform: translateY(20px);
}.box {
transform: rotate(45deg);
}.box {
transform: scale(1.5); /* 150% size, both directions */
transform: scale(1.5, 0.5); /* different width and height scale */
}.box {
transform: skewX(20deg);
transform: skewY(10deg);
}Multiple functions can be listed in one transform value, applied in order.
.box {
transform: translate(20px, 10px) rotate(15deg) scale(1.2);
}Sets the point a rotation or scale happens around — the center by default.
.box {
transform-origin: top left;
transform: rotate(45deg);
}| Function | Effect |
|---|---|
| translate(x, y) | Moves an element |
| rotate(deg) | Rotates an element |
| scale(x, y) | Resizes an element |
| skew(x, y) | Slants an element along an axis |
What transform does not do
A transform is purely visual — it never changes the space an element reserves in the page's layout, unlike changing width, height, or margin directly.