CSS Transform Generator
Combine translate, rotate, scale and skew, plus 3D rotateX, rotateY, translateZ and perspective, with a live preview. Copy the CSS or Tailwind.
3D
Perspective is the viewer's distance from the scene. A smaller value means a closer viewer and a stronger 3D effect; it only matters once Rotate X, Rotate Y or Translate Z is used.
.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.
3D transforms add depth: rotateX tips an element toward or away from you, rotateY turns it like a door, and translateZ moves it closer or further. None of them look three-dimensional until the parent has a perspective, which sets how far the viewer is from the scene. A small perspective is a viewer standing close, with strong foreshortening; a large one is a viewer far away, where the same rotation looks nearly flat.
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.
- 3For depth, use Rotate X, Rotate Y or Translate Z in the 3D panel, then adjust Perspective until the effect looks right.
- 4Watch the order in the exported CSS, since it affects the outcome.
- 5Copy 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.
- perspective belongs on the parent, not on the element being rotated. Put it on each card instead and every card gets its own vanishing point, which looks wrong in a row of them.
- Rotate a card past 90 degrees on Y and you see its back. Add backface-visibility: hidden to the faces of a flip card so the reverse side does not show through.
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.
Why does my rotateY look flat?
Because the parent has no perspective. Without it the browser projects the element straight on, so a 3D rotation only looks like the element getting narrower. Add perspective to the parent.
What perspective value should I use?
Somewhere between 600px and 1000px reads as natural for cards and panels. Below about 300px the distortion becomes dramatic; above 1500px the 3D effect almost disappears.