Transform

CSS

Compose CSS transforms and see how their order affects the result. CSS transforms are applied right-to-left — scale before rotate produces a different result than rotate before scale.

element

Controls

translateX0px

translateY0px

rotate0°

scaleX1

scaleY1

skewX0°

skewY0°

transform-origin50% 50%

transform:
translate(0px, 0px)
rotate(0deg)
scale(1, 1)
skew(0deg, 0deg);
transform-origin: 50% 50%;

concepts

application order

CSS transforms are applied right-to-left. translate → rotate first rotates around the origin, then moves the already-rotated element.

coordinate system shift

Each function modifies the local axes. rotate spins the axes; any subsequent translate moves along those rotated axes, not the original ones.

transform-origin

The pink dot marks the pivot point for rotate and scale. Try rotating with origin at 0% 0% — the element orbits its top-left corner instead of its center. Same transform, completely different result.

skew

Shears the element along an axis — slanting it like italic text — without changing its dimensions or position.

core pattern

/* transform-origin shifts the pivot point for rotate and scale */
transform-origin: 0% 0%;     /* top-left corner */
transform-origin: 50% 50%;   /* center (default) */
transform-origin: 100% 100%; /* bottom-right */

/* Applied right-to-left:
   skew first, then scale, then rotate, then translate */
transform:
  translate(50px, 0px)
  rotate(30deg)
  scale(1.5, 1.5)
  skew(10deg, 0deg);