CSS Transform Generator
Build CSS 2D transforms visually. Combine translate, scale, rotate, and skew with live sliders, pick a transform-origin from a 9-point grid, and watch the preview card update in real time before copying the CSS.
Transform origin
Live preview
transform: none
How to use
Move, scale, rotate, skew
Each slider maps directly to a transform function — only non-default values are included in the output, so the CSS stays minimal.
Set the transform-origin
Pick one of 9 anchor points to control where scale and rotate pivot from — useful for corner-anchored zooms or hinge-style rotations.
Try a preset
Slide, zoom, rotate, flip horizontal/vertical, and skew presets give you a working transform instantly — tweak from there.
Copy CSS
The output is a single .element { transform: ...; } rule (plus transform-origin if changed) ready to paste into your stylesheet.