How to Move and Rotate Elements with CSS Transforms
Transforms rotate, scale, move and slant elements without disturbing the layout. This guide explains each function and the order they combine in.
What is the CSS Transform Generator?
Transforms move, rotate, resize and slant an element without changing the space it takes in the layout. Set a rotation angle, a scale factor, horizontal and vertical movement, and a skew angle, and this tool writes one transform line combining them. Small rotations and scales suit hover effects; larger moves suit slides and entrances.
How to use it
- Enter a rotation angle and a scale factor.
- Set how far the element should move right and down, plus any skew.
- Click Generate transform CSS and copy the rule into your stylesheet.
Worked example
With rotation 15, scale 1.1, movement of 10px right and 20px down, and skew 0, the result is a .transformed rule with transform: translate(10px, 20px) rotate(15deg) scale(1.1) skew(0deg).
Why does transform order matter?
Transforms apply right to left in effect, so rotating before moving gives a different landing spot than moving before rotating. When a result looks off, try swapping the order.
Frequently asked questions
Does a transform change the layout around the element?
No. The element keeps its original layout space, and the transformed version is drawn on top of that space, which is why transforms suit hover effects.
What does a scale of 1 mean?
A scale of 1 keeps the original size. Values above 1 grow the element, and values below 1 shrink it, from its center by default.