🔄 CSS Transform Generator
Combine translate, rotate, scale and skew and watch an element transform live, then copy the CSS transform declaration.
transform: none;How the css transform generator works
The CSS transform property moves, rotates, resizes and skews an element without affecting document flow. This generator exposes translateX/Y, rotate, scale and skew as controls, applies them in order to a sample element, and writes the combined transform value. Because transforms are composited by the browser, they are the smooth, GPU-friendly way to animate position and size, far better than animating top/left or width/height. The generated CSS runs in your browser and is ready to paste.
Transform order matters: rotate then translate moves along the rotated axes, while translate then rotate moves first and spins in place. The transform-origin property (default centre) sets the pivot point for rotate and scale. Transforms do not change layout, so neighbours do not move when an element scales or rotates.
Frequently asked questions
In what order are CSS transforms applied?
Left to right, and order changes the result: transform: rotate(45deg) translateX(100px) moves along the rotated axis, whereas translateX(100px) rotate(45deg) moves first then spins in place. The generator applies functions in the order shown.
Why use transform instead of changing top/left?
Transforms are composited on the GPU and do not trigger layout, so animating them is smooth and cheap. Animating top, left, width or height forces the browser to recalculate layout every frame, which is slower and can jank.
What is transform-origin?
transform-origin sets the pivot point for rotate and scale, defaulting to the element's centre (50% 50%). Move it to a corner to rotate or scale around that corner instead.
Can I do 3D transforms?
Yes, with rotateX, rotateY, rotateZ and perspective. This generator focuses on common 2D transforms plus basic rotation; add perspective on the parent for a 3D effect.
Is anything uploaded?
No. The transform CSS is generated locally in your browser.