Developer Tools New Tool

Free Online CSS Transform Generator for Translate, Rotate and Scale

Build a transform from translate, scale, rotate and skew, set the origin it works around, and choose the order the functions are written in, because rotate then translate does not mean the same thing as translate then rotate. The 3D functions and perspective are here as well.

Free Forever Nothing Uploaded Function order control Runs in your browser

Free Online CSS Transform Generator for Translate, Rotate and Scale

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Transform Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

before

CSS

Order Functions are written Show the original position

Translate X 0px Y 0px

Scale and rotate Scale X 1 Scale Y 1 Rotate 0deg

Skew and origin Skew X 0deg Skew Y 0deg Origin X Y 50% 50%

3D Add the 3D functions rotateX 20deg rotateY 20deg perspective 600px

A transform moves the painted element only. Its space in the layout does not change, so nothing around it reflows.

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

Why the Order of the Functions Matters

Each one is applied to the coordinate system the last one left behind.

A transform list is read left to right, and each function works on the coordinate system produced by the one before it. So rotate(45deg) translateX(100px) rotates the element's axes first and then moves it 100px along the rotated X axis, which sends it off diagonally. translateX(100px) rotate(45deg) moves it 100px to the right on the normal axis and then spins it where it stands. Same two numbers, two completely different results.

Scale behaves the same way. scale(2) translateX(50px) moves the element 100px on screen, because the translation is measured in the scaled coordinate system, while translateX(50px) scale(2) moves it 50px and then doubles its size in place. This is also why a rotation looks wrong the moment you change transform-origin: the origin is the point every function pivots and scales around. Change the order in the control above and watch the preview to see it rather than take it on trust.

How to Build a CSS Transform

A few steps, and nothing is uploaded.

Move it Drag the translate sliders. The dashed outline stays where the element started, so you can see how far it has gone.

Scale, rotate and skew Scale each axis separately, rotate in degrees, and skew if you need the slanted look. Set the origin to pivot around a corner instead of the centre.

Change the order Pick a different function order and watch the same values land somewhere else. This is the part that catches people out.

Copy the rule The output holds the transform declaration, and the transform-origin declaration whenever it is not the default centre.

What to Know About CSS Transforms

Order, origin, and what a transform does not affect.

The order of the functions is part of the value. Transforms are applied left to right, each on the coordinate system left by the one before, so rotate(45deg) translateX(100px) and translateX(100px) rotate(45deg) put the element in two different places. If a transform copied from somewhere else behaves oddly, check the order first.

transform-origin is the pivot for everything, not just rotation. It moves the point that rotation turns around, that scaling grows from, and that skew shears about. The default is the centre of the element, and changing it to 0 0 means the top left corner stays put while the rest moves.

A transform does not change the layout. The element keeps the exact space it had before, so neighbours do not move, scrollbars do not appear from a translation alone, and a scaled element can overlap whatever is beside it. That is what makes transforms cheap to animate, and it is also why they cannot be used to lay a page out.

This page cannot read an existing transform back. The sliders generate a value; they do not parse one. There is also no matrix support and no animation or transition output here, so if you need matrix3d() or a keyframe sequence, this is not the tool that will give it to you.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

All four basics Translate, scale, rotate and skew, on both axes.

Order you control Choose how the functions are written, since that changes the result.

Origin in per cent Pivot around a corner or an edge rather than the centre.

Original position shown A dashed outline marks where the element started.

3D and perspective rotateX, rotateY and a perspective value in the same list.

Runs in your browser Nothing uploaded, and it works with the network off.

About the CSS Transform Generator

The transform property moves, turns, scales and shears an element without touching the layout around it. Because it is handled on the compositor rather than by reflowing the page, it is the property to reach for when something has to animate smoothly, and it is why almost every modal, drawer and hover lift in a modern interface is a transform rather than a change of position.

What makes it awkward is that a transform is a list, and the list is ordered. Each function acts on the coordinate system the previous one produced, so the same set of numbers in a different order puts the element somewhere else entirely. This page makes that visible: choose the order in a control, and the preview and the output change together, with a dashed outline showing where the element began.

The 3D functions are here as well, since rotateX and rotateY do nothing convincing without a perspective value to give them depth. The output is a plain declaration, with transform-origin printed as a second line whenever it is not the default, so what you paste is complete rather than half of the story.

Frequently Asked Questions

Function order, origin, perspective and layout.

Yes, and it is the single most common source of confusion with this property. The list is applied left to right and each function works in the coordinate system left behind by the previous one. Rotating and then translating sends the element along its new, rotated axis; translating and then rotating moves it first and spins it in place.

It sets the point that the whole transform pivots and scales around. The default is the centre of the element. Setting it to 0 0 pins the top left corner, which is what you want for a menu that should grow out of its trigger, and setting it to bottom center is how a card hinges up from its base.

Because without perspective a 3D rotation is projected flat, so a rotateY just squashes the element horizontally. Add a perspective() function at the start of the transform list, or set the perspective property on the parent, and the rotation gains depth. Smaller perspective values mean a stronger, more dramatic effect.

No. The element keeps its original space in the layout, so nothing reflows and no scrollbar appears from the transform itself. This is usually exactly what you want, but it does mean a scaled-up element will overlap its neighbours rather than push them aside.

No. This page writes the readable function list and the origin, which is what you want in a stylesheet almost all of the time. Matrix values are for generated code and tooling rather than hand-written CSS, and transitions or keyframes are a separate thing you would add around this value yourself.