The transform property lets you translate, rotate, scale, or skew an element visually. It changes how the element is painted, not how much space it keeps in normal flow.
Any value other than none creates a stacking context. You can also use the individual properties translate, rotate, and scale, which run before transform.
Baseline widely available for 2D transforms. Not deprecated as a property.
Animated scale/zoom can trigger discomfort. Respect prefers-reduced-motion when you animate transforms.
Non-replaced inline boxes (plain span text) do not transform. Use a block or inline-block box instead.
transform: none | <transform-function>+ | initial | inherit;List one or more functions separated by spaces. They apply left to right, and that order changes the result.
| Value | Description | Try it |
|---|---|---|
none | No transform (initial) | Try it |
translate(40px, 0) | Move along X and Y | Try it |
rotate(15deg) | Rotate around the transform origin | Try it |
scale(1.2) | Grow or shrink from the origin | Try it |
translate(20px) rotate(15deg) | Combine functions (order matters) | Try it |
inherit | Takes the parent’s transform | Try it |
Also common: skew(), matrix(), and 3D forms such as rotateY() / translate3d(). Start with 2D functions first.
transformPick the visual change you need, then stack functions only when one is not enough.
div, button, img, or an inline-block).translate, rotate, scale, or skew.transform-origin.| Goal | Typical value |
|---|---|
| Slide sideways | translateX(40px) |
| Tip / badge angle | rotate(-8deg) |
| Hover grow | scale(1.05) |
| Reset | none |
Same box. Change only transform. Layout space stays put.
Each snippet focuses on transform. Use Try It Yourself for a live editor.
translateSlide the box 40px to the right without changing layout flow.
<style>
.box {
transform: translate(40px, 0);
}
</style>
<div class="box">Box</div>position change is required for a simple slide.translate. The first argument is X; the second is Y (0 here).translateX(40px) is the same horizontal move.Turn the box 15 degrees around its transform origin.
<style>
.box {
transform: rotate(15deg);
}
</style>
<div class="box">Box</div>transform-origin.deg, turn, and rad are all valid.Move first, then rotate—order changes the final spot.
<style>
.box {
transform: translate(20px) rotate(15deg);
}
</style>
<div class="box">Box</div>translate runs first, then rotate.rotate(15deg) translate(20px) lands in a different place.transform rule would replace the first, not add to it.If a transform looks wrong, one of these is usually why.
Transformed paint can overlap neighbors, but margins and following boxes still use the original box. Use positioning or margins when you need real layout space.
translate then rotate is not the same as rotate then translate. Swap intentionally when debugging.
Non-replaced inline elements are not transformable. Set display: inline-block or use a block-level element.
none creates a stacking contextAbsolute/fixed descendants are contained by a transformed ancestor. That can surprise you with overlays and modals.
transform replaces anotherYou cannot add a second transform declaration to stack more functions. Put every function in the same value, or use the individual translate / rotate / scale properties.
transform is a browser CSS property for visual transforms. Node.js, Deno, and Bun do not apply it.
2D transforms: Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 12+, IE 9+. 3D transforms: modern evergreen browsers (Chrome 12+, Firefox 10+, Safari 4+, Edge 12+).
Bottom line: Safe for everyday 2D translate, rotate, and scale. Prefer unprefixed modern syntax; vendor prefixes are no longer needed for current browsers.
none. Not inherited.none creates a stacking context.One line: use transform for visual motion and shape changes; keep layout spacing with margins or positioning when the gap must stay empty.
Learn how to change the pivot used by rotate and scale.
8 people found this page helpful