CSS workflow
CSS 2D transforms: order, origin and reference boxes
Transform functions can use the same numbers yet produce different geometry when reordered. Compare a native preview with the original border box, then check the result in your receiving component.
Content updated: · Maintainer and corrections
Written order changes the coordinate system
CSS combines the transform matrices in written order, left to right. Each function establishes coordinates for the next; describing the same result in the fixed parent coordinate system applies the geometric operations right to left. This is matrix composition, not an animation timeline.
At origin 0% 0%, translate(100px, 0px) rotate(90deg) maps the original top-left point to (100, 0); rotate(90deg) translate(100px, 0px) maps it to (0, 100). The generator preserves the selected written order and can show its exact reversal at a shared display scale. No enabled operations yields none, but enabled identity functions remain: a non-none transform can establish a stacking context and containing block even when it looks unchanged.
Origin and translation percentages use the reference box
transform-origin chooses the pivot: CSS translates to the origin, composes the transforms, then translates back. The editor exports transform-box: border-box; explicitly. Horizontal origin and translation percentages use border-box width; vertical percentages use its height. On a 200 × 100px reference box, translate(50%, 25%) means (100px, 25px), while origin 50% 50% means (100px, 50px).
The hollow marker is the original origin; the filled marker is that point after the complete transform. A translation can move the filled marker away from the hollow one. Changing reference dimensions changes percentage translation, not px translation. px and % keep independent in-memory values; switching units is not an equivalent conversion. The guide and preview concern HTML border boxes, not SVG reference boxes.
Mirrors and degenerate geometry are valid CSS
A negative scale mirrors an axis. A zero scale creates a non-invertible matrix and the transformed object is not displayed. Combining skew axes can also produce a singular or nearly singular matrix. The editor accepts supported values and warns when scale is zero or the native matrix determinant is near zero; it does not turn these valid declarations into input errors.
The preview uses native CSS for rendering and DOMMatrix for bounds and origin points. Its decorative display may shrink to fit all reference and transformed corners; both order previews share that scale. Preview dimensions, colors, fitting scale and the reversed comparison are never included in the copied three declarations. Very thin shapes can remain difficult to see even when valid.
Check layout, overflow and visible focus separately
Transforms change painted geometry without reflowing the surrounding layout. The original layout space remains; transformed content may overlap neighbors or expand scrollable overflow. Ancestor overflow or containment can clip it. Non-none transforms also affect stacking and containing blocks, including positioned descendants; this workbench is not a complete layout simulator.
A visually clear preview is not an accessibility certificate. Test actual text, controls, fixed descendants, pointer hit areas and keyboard focus at real sizes and zoom. Do not remove required overflow rules globally or hide focus just to match the decorative preview. This editor supplies labelled text fields, native sliders, operation-order buttons and selectable CSS without requiring dragging or animation.
Keep editor limits, errors and privacy explicit
The four unique operation groups accept translation ±500px or ±200%, rotation ±360deg, skew ±60deg and origin 0–100%, with at most one decimal. Scale accepts −3 to 3 with at most two decimals; reference dimensions accept integers 64–400px. Blank, non-finite, exponent, unit-bearing, out-of-range and over-precision inputs are rejected. These are editor limits, not CSS limits. Disabled operation values are retained but ignored; invalid active fields block preview, output and copying without stale success.
Arrow keys nudge values; Shift multiplies the nudge by ten. Unit modes retain separate values. Reset disables all operations and restores neutral values. Clipboard failure leaves selectable code. Settings stay in page memory without upload, persistence, URL parameters or input-value analytics; existing approved page analytics may still run. Modern browsers need DOMMatrix for geometry; if unavailable, the preview reports that limitation. The editor does not import arbitrary CSS or HTML, process SVG, add 3D or perspective, or export animations or Tailwind classes.
/* Compare order at the same reference dimensions. */
.a, .b { width: 200px; height: 100px; transform-box: border-box; transform-origin: 0% 0%; }
.a { transform: translate(100px, 0px) rotate(90deg); }
.b { transform: rotate(90deg) translate(100px, 0px); }Data provenance