OneTaskBy Tim King · Updated
CSS Transform Generator
Translate, Rotate, Scale and Skew Sliders With transform-origin
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CSS Transform Generator works
This CSS transform generator writes rotate, scale, skew and translate values. transform moves, turns, resizes and slants an element without touching layout, which makes it the
workhorse of hover effects and animations. This tool composes the four 2D functions in the order
browsers apply them, shows the result against a dashed outline of the untransformed box, and writes
the rule with the transform origin you choose.
CSS transform generator: functions and their order
A transform is a list of functions applied right-to-left to the element's coordinate system. The
generated value lists them as translate() rotate() scale() skew(), which reads naturally: the
element is skewed, then scaled, then rotated, then moved. Order matters — rotate(45deg) translate(50px) moves the element along its rotated axis, whereas translate(50px) rotate(45deg)
moves it along the page axis and then spins it in place. Reorder the functions in the copied rule if
you need the other behaviour.
Translate. Shifts the element by a distance in x and y. Pixels are used here; percentages are
relative to the element's own size, which is what makes translate(-50%, -50%) the standard centring
trick. Translation never affects surrounding layout — the element's original space stays reserved,
shown by the dashed outline in the preview.
Rotate. Turns the element around its transform origin by an angle in degrees. Positive is clockwise. Rotations past ±180° are equivalent to smaller ones for a static transform, but matter for animation direction.
Scale. Multiplies the element's size; 1 is unchanged, 0.5 half, 2 double. The tool writes
separate x and y factors so you can stretch in one axis. Negative values flip the element — scale(-1, 1) is a horizontal mirror. Scaled text stays sharp in modern browsers because it is re-rasterised,
but a scale below about 0.5 is a hint that the underlying font size should shrink instead.
Skew. Slants the element along x, y or both. A skew of 20° on x makes the vertical edges lean while the horizontal ones stay put. Text inside skews too, which usually looks wrong; counter-skew a child element by the negative angle to keep the text upright inside a slanted card.
Transform origin. Every function is applied around this point, which defaults to the element's
centre. Rotate with top left and the element swings from its corner; scale with bottom and it
grows upward from its base. The preview redraws immediately when you change it, which is the fastest
way to build intuition for what the origin does.
Layout and painting. Transforms are applied after layout, so neighbours never move. The
transformed element is promoted to its own compositing layer in most engines, which is why
transform-based animation is smooth even on weak devices, and why animating top or width instead
is discouraged. A transform also creates a containing block for position: fixed descendants — a
common surprise when a modal inside a transformed card stops being fixed.
Individual properties. Modern browsers also support translate, rotate and scale as separate
properties, applied in a fixed order (translate, rotate, scale) before transform. They are cleaner
for animating one axis while another stays constant. The generated rule uses the classic shorthand
because it works everywhere and keeps order explicit.
FAQ
Why does changing the order of the functions change the result?
Because each function is applied in the element's current coordinate system, which the previous function may have rotated or scaled. A translate after a rotate moves along the rotated axis. If a combination looks wrong, swap the order in the copied value.
Why is there a dashed box behind the element?
It shows the element's original position and size, which layout still reserves. Transforms only change painting, so neighbouring content does not move — the outline makes that visible while you drag the sliders.
How do I centre an element with transform?
Set position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%). The percentages in
translate are relative to the element's own size, so it shifts back by half its own width and
height. Flexbox or grid centring is simpler when the parent can be changed.
Can I animate the transform?
Yes, and it is the recommended property to animate along with opacity because it does not trigger
layout. Add transition: transform 0.3s and change the value on hover, or use the keyframes
generator on this site for multi-step animations. The cubic-bezier tool gives you easing curves.
Does the 3D version work the same way?
rotateX, rotateY, translateZ and perspective follow the same principles but need a
perspective on the parent or in the transform to look three-dimensional. They are outside this
tool's scope, but any 3D function can be appended to the generated 2D value.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Cubic Bezier
Shape a CSS easing curve and watch it animate.
CSS Shapes Generator
Classic single-element CSS shapes with size and colour controls.
CSS Generator
Build a formatted CSS rule from a selector and a form of properties.
Coverflow Carousel
Build a 3D cover flow slider with tilted side slides.
Flip Card
3D flip card with front and back faces, no JavaScript.