CSS Transform Generator: 2D Order & Origin
Visually edit translation, rotation, scale and skew, compare reversed order, adjust transform-origin and copy native 2D CSS locally.
02 / Native preview
Same values. Different order.
Measuring preview…
rotate(15deg)
Original transform-originTransformed point
Dashed outline: original box. Translation moves the origin marker too. Display scaling never changes CSS.
64–400px; integers, no units.
64–400px; integers, no units.
Dimensions define this preview reference box and are not exported. Percentage translation uses the element's own width/height.
Transform origin
0–100%; up to 1 decimal, no units.
0–100%; up to 1 decimal, no units.
03 / Order & precision
Select a step. Make it precise.
This list is CSS's written left-to-right order. In fixed parent coordinates, point transformations can be understood right to left.
Rotate
-360–360deg; up to 1 decimal, no units.
Field arrow keys nudge; Shift multiplies the step by ten. Blank, exponent, unit-bearing and out-of-range input is not silently corrected. These are editor limits, not CSS limits.
04 / CSS
Copy the current order
transform-box: border-box;
transform-origin: 50% 50%;
transform: rotate(15deg);Enabled identity functions are retained; only disabling all steps outputs none. Identity transforms and none differ in stacking-context behavior.
Settings stay on this page without upload, storage or URL parameters. Preview dimensions and colors are excluded. Transforms do not reflow surrounding content; check clipping, overlap and focus in your real component.
How to use this tool
Choose a preset, select and enable an operation, then edit its values and move it up or down. Compare reversed order against the original box and origin markers. Set reference dimensions for percentage translation, then copy the three declarations. px and % retain separate values without conversion.
When not to use it
This editor handles four typed 2D operation groups, not 3D, perspective, arbitrary CSS imports, animation or layout design. Transforms do not reserve new layout space. Check overflow, stacking, fixed descendants and visible keyboard focus in your real component.
Design polygon clipping → · Adjust rounded corners →
Read the guide →