Combine translate, rotate, scale and skew with sliders — order preserved, transform-origin selectable — and copy the composed transform declaration.
Settings
Generated locally in your browser — your settings and results never leave this page.
Composed transforms without the head-scratching
Single transforms are easy; composed ones surprise — functions apply in sequence, so rotate-then-translate lands somewhere different than translate-then-rotate. This generator fixes the order to the intuitive one (translate → rotate → scale → skew), lets you drag each slider watching the element respond, and exposes transform-origin because rotation around a corner behaves nothing like rotation in place.
Worked example
.hover-lift {
transform: translate(0px, -6px) scale(1.03);
}
.tilted-polaroid {
transform: rotate(-4deg);
transform-origin: center;
}Why transforms are THE animation properties
- They skip layout and paint — the browser composites them on the GPU, keeping motion smooth where top/left/width animation janks. Every hover lift, entrance and micro-interaction should be transform + opacity; the presets are exactly those patterns.
Practical notes
- Transforms do not affect surrounding layout — the element’s original box keeps its space (usually desirable; occasionally surprising).
- Skew distorts children too — apply a counter-skew to inner content for the parallelogram-container-straight-text pattern.
Related
- Put motion behind these values in the Animation Generator.
Order changes the result
CSS transforms apply right to left, so translate then rotate is not the same as rotate then translate. The first moves the element and turns it in place; the second turns the coordinate system and then moves along the rotated axes.
Worked example
transform: translateX(100px) rotate(45deg); moves right, then rotates in place transform: rotate(45deg) translateX(100px); rotates, then moves along the rotated X axis
Why transforms are cheap
Transform and opacity can be handled by the compositor without re-running layout or paint, which is why animating them stays smooth where animating width, top or margin does not. Animating a transform is the single most effective change in most janky animations.
The origin
transform-origin sets the point everything pivots around, defaulting to the centre. Moving it to a corner changes a rotation completely, and it is usually the explanation when an element swings away instead of turning on the spot.
Limits
The generator produces the declaration and a live preview; it does not manage keyframes or transitions, which are separate tools. Everything runs in your browser.
How to use the CSS Transform Generator
- Drag translate, rotate, scale and skew sliders — the preview element follows.
- Pick a transform-origin if rotation should pivot off-center.
- Copy the composed transform declaration.
Frequently asked questions
Does the order of transform functions matter?
Yes — transforms apply right-to-left and compose: rotate-then-translate lands elsewhere than translate-then-rotate. This generator emits translate → rotate → scale → skew, the order that behaves most intuitively.
Why use transforms instead of top/left or width?
Transforms are compositor-friendly: they skip layout and paint, staying smooth at 60fps. That is why hover lifts and entrance animations should always be transform + opacity.
What is transform-origin?
The pivot point. Rotation around "center" tilts in place; around "bottom left" it swings like a hinge — the difference between a card tilt and a door opening.
