Drag the sliders to move, rotate, scale and skew a box, pick the transform-origin, and add 3D tilt with perspective. The preview and CSS update live, along with the equivalent matrix().
Last updated:
Presets
Translate
Rotate & skew
Scale
3D
Transform origin
%
%
Preview
CSS
Advertisement
Advertisement
How to use the CSS Transform Generator
Start from a preset or drag the sliders. Type exact values in the number boxes.
Set the transform origin with the 3×3 grid or custom X/Y percentages; the orange dot shows the pivot point.
Turn on 3D to tilt the element with rotateX and rotateY; lower perspective values give a stronger effect.
Change the function order to see why rotate-then-translate differs from translate-then-rotate.
Copy the CSS, or tick the :hover option to get a ready-made hover effect with a transition.
CSS transform functions at a glance
Function
Example
Effect
Identity value
translate(x, y)
translate(40px, -10px)
Moves right 40px and up 10px
0, 0
rotate(a)
rotate(15deg)
Turns clockwise around the origin (negative = anticlockwise)
0deg
scale(x, y)
scale(1.2) or scale(-1, 1)
Resizes; 1 = original size, negative values mirror
1
skew(x, y)
skewX(-15deg)
Slants the element along an axis
0deg
rotateX / rotateY
rotateY(30deg)
3D rotation around the horizontal or vertical axis
0deg
perspective(d)
perspective(800px)
Viewer distance for 3D functions that follow it
none
matrix(a, b, c, d, e, f)
matrix(1, 0, 0, 1, 40, 0)
All 2D functions combined into one affine matrix
1, 0, 0, 1, 0, 0
How the matrix is calculated
Each 2D function is a 3×3 matrix, and a transform list multiplies them from left to right. For rotation by angle θ the matrix is matrix(cos θ, sin θ, −sin θ, cos θ, 0, 0); scaling by (sx, sy) is matrix(sx, 0, 0, sy, 0, 0); translation by (tx, ty) is matrix(1, 0, 0, 1, tx, ty); skew by (α, β) is matrix(1, tan β, tan α, 1, 0, 0). For example rotate(30deg) becomes matrix(0.866, 0.5, −0.5, 0.866, 0, 0). The generator shows the combined matrix for your settings, which is also what getComputedStyle() returns.
Practical tips
Use transform: translate(-50%, -50%) with top: 50%; left: 50% to centre an absolutely positioned element of unknown size.
Percentages in translate refer to the element's own size, not its parent's.
Transforms do not work on inline elements such as a plain <span>; give it display: inline-block.
Pair transforms with transition or @keyframes for smooth motion; the CSS animation generator builds keyframes for you.
Respect users who prefer less motion by disabling large transforms inside @media (prefers-reduced-motion: reduce).
Frequently asked questions
What does the CSS transform property do?
transform changes how an element is drawn without changing the page layout around it. It can move (translate), turn (rotate), resize (scale) and slant (skew) the element, in 2D or 3D. Neighbouring elements keep their places, as if the element still had its original size and position.
Why does the order of transform functions matter?
Functions are applied from right to left in the element's coordinate system, so each one changes the axes for the ones before it. translate(100px) rotate(45deg) moves the element right and then spins it in place, while rotate(45deg) translate(100px) moves it 100px along the rotated, diagonal axis.
What is transform-origin?
It is the fixed point that rotation, scaling and skewing happen around. The default is the centre (50% 50%). Setting it to top left makes the element rotate around its top-left corner, like a door hinge on that corner.
How do I flip an element in CSS?
Use a negative scale: transform: scaleX(-1) mirrors it horizontally and scaleY(-1) flips it vertically. Text and images are mirrored too. Use the Flip horizontal and Flip vertical presets to try it.
What is the difference between transform and the translate, rotate and scale properties?
Modern browsers also support separate translate, rotate and scale properties. They are handy for animating one part at a time, but they are always applied in the fixed order translate, rotate, scale and cannot express skew. The tool shows the individual-property version when it gives the same result.
Does transform affect performance?
Transforms are among the cheapest properties to animate, because browsers can usually move the already painted element on the GPU without recalculating layout. Animating width, height, top or left instead triggers layout and is slower.
What does perspective() do?
perspective(n) sets how far the viewer is from the screen, in pixels, for 3D transforms. Small values such as 300px give a dramatic, close-up effect; large values such as 1500px look flatter. It must come first in the transform list to affect the 3D functions after it.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.