Combine translate, rotate, scale and skew with sliders — order preserved, transform-origin selectable — and copy the composed transform declaration.
Generated locally in your browser — your colors, settings and code 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.
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.
