CSS transform generator

How to use it

1. Use translate, rotate, scale and skew to change the card. The dashed outline stays at the original position.
2. Pick a transform-origin — the point the element rotates and scales around; the red dot marks it.
3. Tick “3D” to add rotateX, rotateY and the perspective of the parent element.
4. Press “Animate from none” to see the change from no transform to your result, then click “Copy”.

How it works

Four 2D functions

translate(x, y) moves the element, rotate(angle) turns it clockwise, scale(x, y) stretches or shrinks it (scale(-1) mirrors it) and skew(x, y) slants it. A transform changes only how the element is drawn: its original space in the layout stays reserved and neighbors do not move — that is what the dashed outline shows. Percentages in translate refer to the element's own size, so translate(-50%, -50%) is a classic centering trick.

The order of functions matters

Each function works in the coordinate system already changed by the previous ones. translateX(100px) rotate(45deg) first moves the element 100px to the right and then turns it in place. rotate(45deg) translateX(100px) first turns the axes, so the element moves 100px along the tilted axis — diagonally. The generator writes functions in a fixed order: translate, rotateX, rotateY, rotate, scale, skew.

/* moves right, then rotates in place */
transform: translateX(100px) rotate(45deg);

/* rotates first, then moves diagonally */
transform: rotate(45deg) translateX(100px);

transform-origin: the pivot point

By default the origin is the center of the element (50% 50%). rotate and scale keep this point fixed, so transform-origin: top left rotates the element around its top-left corner. The value accepts keywords, percentages and lengths.

transform-origin: top left;
transform-origin: 20% 80%;

3D: perspective, rotateX and rotateY

rotateX tilts the element forward or back and rotateY turns it left or right. Without perspective the result looks flat. Set perspective on the parent: the smaller the value, the stronger the depth. The same effect is available inside a single element as the perspective() function at the start of the transform list.

.parent  { perspective: 600px; }
.element { transform: rotateX(25deg) rotateY(-20deg); }

Individual properties: translate, rotate, scale

Modern browsers also support translate, rotate and scale as separate properties. They are applied in the order translate, rotate, scale and then transform, so you can change or animate one of them without rewriting the whole transform list. They have been supported by all major browsers since 2022.

.element {
  translate: 40px 20px;
  rotate: 15deg;
  scale: 1.1;
}

FAQ