CSS Transform Generator
Move, rotate, scale and skew an element in 2D or 3D, choose the pivot point and the order, and see the result live. Copy it as transform functions, as the modern translate / rotate / scale properties, as matrix(), or as a Tailwind class.
Presets
Mode
Translate (move)
Rotate
Scale
Skew
Perspective
0 = none. Smaller distances give stronger depth. Added asperspective() at the start of the transform.
Origin (pivot point)
Order
Transforms apply in this order. Rotating then moving is not the same as moving then rotating.Output
Preview element
The size matters for % translate. It isn't part of the code.What Is a CSS Transform?
A way to move, rotate, resize or slant an element visually without changing the page layout.
transform changes how an element is drawn: it can be moved (translate), turned (rotate), resized (scale) or slanted (skew), in 2D or 3D. The space the element takes up in the layout doesn't change, so nothing around it moves.
Transforms are also cheap to animate. Browsers can usually move, rotate and scale an element on the GPU without recalculating the layout, which is why they're the standard choice for hover effects, slide-ins and card flips.
Two details change the result. The origin (transform-origin) is the pivot point: rotating around the centre is different from rotating around a corner. The order matters too: translate(100px) rotate(45deg) moves first and then turns, while rotate(45deg) translate(100px) moves along the rotated direction.
Modern CSS also has separate translate, rotate and scale properties. They always apply in that fixed order, before transform, and are handy when you want to animate one of them without retyping the others.
Transform Functions
The functions this tool writes and what they do.
translate(x, y) · translate3d(x, y, z)
Moves the element. % values are relative to the element's own size, so translate(-50%, -50%) centres an absolutely positioned element on its top/left point.
rotate(a) · rotateX/Y/Z(a)
Turns the element clockwise for positive angles. rotateX and rotateY tilt it in 3D and need perspective to look three-dimensional.
scale(x, y) · scale3d()
Resizes the element: 1 is the normal size, 2 doubles it, and −1 mirrors it.
skew(x, y)
Slants the element along the X and/or Y axis. Values close to 90° stretch it towards infinity.
perspective(d)
Gives 3D transforms depth. It must come first in the list. You can also set perspective: d on the parent instead, which shares one vanishing point between all of its children.
matrix() · matrix3d()
Any combination of transforms collapsed into one matrix. It's compact but hard to read or edit, and % translations are baked in as pixels.
How to Use the CSS Transform Generator
Get your result in under ten seconds.
Set the transform
Use the sliders or a preset. Switch to 3D for tilts, flips and perspective.
Pick the pivot and order
Choose the origin point and, if needed, change the order with the arrows.
Copy the code
Choose functions, individual properties or matrix(), then copy the CSS or the Tailwind class.
Why Use the CSS Transform Generator on Developers Web Tools
Fast, accurate and private — built for developers.
2D and 3D
translate, rotate, scale and skew, plus rotateX/Y/Z, translateZ, scaleZ and perspective.
Origin and order
A 9-point origin picker plus exact values, and a reorderable function list.
Three output forms
transform functions, modern individual properties (only when they're equivalent), or the browser-computed matrix().
Clear preview
A ghost outline shows the original position and a dot marks the pivot point.
Tailwind too
Ready-to-paste classes that work in Tailwind v3 and v4.
Private
Runs entirely in your browser.
Frequently Asked Questions
No. The element keeps its original space in the layout, and only its drawing changes. To move surrounding content, change margins, padding or the layout itself.
Each function works in the coordinate system left by the previous one. rotate(90deg) translate(100px) moves the element down instead of right, because the X axis has been rotated.
The fixed point that rotation, scaling and skewing happen around. The default is the centre (50% 50%). Set 0 0 to pivot around the top-left corner.
3D needs perspective. Add perspective() at the start of the transform (as this tool does), or set perspective on the parent element.
Both work in all current browsers. The individual properties are handy for animation, since you can transition scale without touching rotate. They always apply in a fixed order (translate, rotate, scale, then transform), so this tool only offers them when that gives the same result.
Transforms are among the cheapest things to animate, because browsers can usually handle them on the GPU without recalculating the layout. Animate transform rather than top/left/width for smooth motion.
Scaling a rendered layer up can make text look soft. Where possible, design at the larger size and scale down, or avoid fractional translations on text.
Only in your own browser (local storage). Press Reset to clear it.