CSS Transform Generator
What transform does
The transform property moves, rotates, scales and skews an element without disturbing the layout around it. Modern CSS also offers translate, rotate and scale as individual properties, which animate independently and compose far more cleanly than one long transform list.
Syntax
transform: translate(<x>, <y>) rotate(<angle>) scale(<factor>) skew(<angle>);| Part | What it controls |
|---|---|
| translate() | Moves the element. Percentages resolve against the element's own size, which is what makes translate(-50%, -50%) the classic centring trick. |
| rotate() | Turns the element around its transform-origin, clockwise for positive angles. |
| scale() | Multiplies size. One value scales both axes; two scale them separately. Negative values flip. |
| skew() | Slants the element along X, Y or both. Angles beyond about 30 degrees distort text badly. |
| transform-origin | The point everything pivots and scales around. Defaults to the centre; 0 0 is the top-left corner. |
| perspective + rotateX/Y | Perspective gives depth to 3D rotations. Without it, rotateY looks like a flat squash rather than a turn. |
Notes from practice
Functions apply right to left
In transform: translateX(100px) rotate(45deg), the rotation happens first and the translation then follows the rotated axes. Swapping the order gives a different result, which surprises people constantly.
Prefer the individual properties for animation
translate, rotate and scale as separate properties can each be animated on their own. With the transform shorthand, animating one part means restating all of them in every keyframe.
Transforms are cheap to animate
transform and opacity are composited on the GPU and skip layout and paint. Animating left, top, width or height instead forces layout on every frame.
CSS Transform Generator FAQ
How do I centre an element with transform?
Position it at 50% from the top and left, then pull it back by half its own size with transform: translate(-50%, -50%). Percentages in translate resolve against the element itself, so it works without knowing its dimensions.
Why does the order of transform functions matter?
Each function is applied in sequence to the element's coordinate system, effectively right to left. Rotating first then translating moves the element along its new, rotated axes, so transform: rotate(45deg) translateX(100px) and transform: translateX(100px) rotate(45deg) land in different places.
What is the difference between transform: translate and the translate property?
They do the same thing, but the individual translate, rotate and scale properties can be set and animated independently, while the transform shorthand replaces the whole list every time. For transitions and keyframes the individual properties are far easier to manage.
Why does my 3D rotation look flat?
There is no perspective. Add perspective: 800px to the parent, or use transform: perspective(800px) rotateY(45deg) on the element itself. Without it, the browser uses a parallel projection and the rotation reads as a horizontal squash.
Does transform affect page layout?
No. A transformed element keeps its original position and size in the layout, so neighbours do not move. That is why transform is the right tool for hover effects and animation, and the wrong one for actually repositioning content.
Related generators
- Transition — Tune duration, delay and easing, including cubic-bezier curves and spring or bounce easing with linear().
- Keyframe Animation — Pick a ready-made @keyframes set and tune timing, repeat, direction and fill mode.
- Motion Path — Move an element along an SVG path with offset-path and animate offset-distance.
- Scroll-driven Animation — Link an animation to scroll position with animation-timeline. Scroll the preview to see it run.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.