CSS Transform Generator
Combine translate, rotate, scale and skew with live preview and a reference outline showing the original position. Copy the CSS.
.transformed {
transform: translate(0px, 0px) rotate(-8deg) scale(1.00, 1.00) skew(0deg, 4deg);
}About the css transform generator
transform moves, rotates, scales and skews an element without touching layout. Nothing around it shifts, which is exactly why transforms are the right tool for animation: the browser can hand them to the compositor and skip layout and paint entirely.
The functions apply right to left in the order written, so the order changes the result. Rotating then translating moves along the rotated axis; translating then rotating does not.
How to use it
- 1Set translate to move the element. The dashed outline shows where it started.
- 2Add rotation, then scale, then skew as needed.
- 3Watch the order in the exported CSS, since it affects the outcome.
- 4Copy the CSS.
Worth knowing
- Transforms do not affect layout, so surrounding elements never move.
- transform-origin controls the pivot point, which defaults to the centre.
- Combined with transition, transforms give the smoothest possible animation because they skip layout entirely.
Questions
Why does changing the order of transform functions change the result?
Each function operates on the coordinate system left by the previous one. Rotating first tilts the axes, so a following translate moves diagonally rather than straight.
Why do transforms animate more smoothly than changing top or left?
Transforms are handled by the compositor and never trigger layout or paint. Changing top or left forces the browser to recalculate positions on every frame.
How do I rotate around a corner instead of the centre?
Set transform-origin, for example transform-origin: top left.