CSS Transform Generator
Compose translate, rotate, scale, skew and 3D transforms visually with a live preview, then copy the CSS, matrix form, or Tailwind value.
This tool runs entirely in your browser. Your input is never uploaded.
Preview box
Live preview updates as you edit
transform: rotateY(15deg) perspective(800px);matrix3d(0.965925826, 0, -0.258819045, 0, 0, 1, 0, 0, 0.258819045, 0, 0.965925826, -0.00125, 0, 0, 0, 1)[transform:rotateY(15deg)_perspective(800px)]Paste a transform value, full declaration, or matrix()/matrix3d() to decompose and keep editing.
Layers (2)
CSS Transform Generator
Compose translate, rotate, scale, skew and 3D transforms visually with a live preview, then copy the CSS, matrix form, or Tailwind value.
Stack transform layers in any order, set a custom transform-origin, and watch the preview update in real time. The tool emits three forms side by side: the friendly CSS function list, the equivalent matrix() / matrix3d() value, and a Tailwind arbitrary-value class. Paste an existing transform or a raw matrix back in to decompose it back into editable layers.
Features
- Five layer kinds — translate (3D), rotate (rotateX/Y/Z), scale (3D), skew (X/Y), and perspective.
- Matrix import — paste
matrix(),matrix3d(), or any transform function list to decompose it into layers. - Custom transform-origin — 9-grid picker plus free text entry for any value (keywords, percentages, lengths).
- Live preview with a dashed ghost outline so you can see how far the box moved from its origin.
- Three outputs — CSS declaration,
matrix()/matrix3d()form, and Tailwind arbitrary value.
This tool runs entirely in your browser. No data leaves your device.
Related tools
CSS Animation Generator
Design fade, slide, scale, rotate, bounce and shake animations and export CSS keyframes with an editable easing curve.
Open ToolBox Shadow Generator
Design layered CSS box-shadows with a live preview, presets, and CSS or Tailwind export.
Open ToolCSS Filter Generator
Tune CSS filter functions such as blur, brightness, contrast, saturation, hue-rotate, sepia and drop-shadow with a live preview, then copy the CSS or Tailwind output.
Open Tool