CSS Transform Generator

Build a transform declaration interactively with sliders for translate (X/Y/Z), scale (X/Y), rotate (Z/X/Y), and skew (X/Y), plus an editable transform-origin and adjustable preview box size. The generated CSS uses translate3d for translation, combines scale/rotate/rotateX/rotateY/skew only when changed, and is emitted alongside transform-origin.

1. Drag the sliders under Translate, Scale, Rotate, and Skew to compose a transform; each value also has a numeric input for precise entry. 2. Adjust the preview Box Size (50–250px) and edit Transform-Origin (any CSS origin string, default 50% 50%). 3. Click Reset to return every value to its neutral default. 4. Click Copy to copy both transform: ... and transform-origin: ... declarations.

translateX/Y/Z: -200 to 200 px, emitted together as translate3d(x, y, z) when any is non-zero. scaleX/Y: 0.1 to 3, emitted as scale(x, y) when either differs from 1. rotate (Z): -360 to 360deg. rotateX/Y: -180 to 180deg. skewX/Y: -60 to 60deg, emitted as skew(x, y) when either is non-zero. If no function is changed the output is transform: none.