Transforms

transform is the CSS Swiss Army knife for moving, rotating, and resizing elements. It happens visually — the layout doesn’t change. Perfect for animation.

The Common Transforms

transform: translate(20px, 10px);      /* shift */
transform: translateX(20px);
transform: translateY(-10px);

transform: rotate(45deg);              /* rotate clockwise */
transform: rotate(-90deg);

transform: scale(1.1);                 /* uniformly bigger */
transform: scaleX(0.5);                /* squish horizontally */

transform: skew(10deg);                /* tilt */

Modern Individual Properties

Recent CSS lets you use individual properties instead of the transform shorthand:

translate: 20px 10px;
rotate: 45deg;
scale: 1.1;

Easier to animate one without resetting the others.

Combine Multiple

transform: translateX(20px) rotate(15deg) scale(1.1);

Applied right-to-left visually. With individual properties, this is no longer a concern — they compose.

transform-origin

By default, transforms pivot around the element’s center.

.rotated {
  transform: rotate(45deg);
  transform-origin: top left;   /* pivot at top-left corner */
}

Values: keywords (top, bottom, left, right, center) or lengths / percentages.

Centering With Transform

A classic pattern — center an absolutely-positioned element:

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

The element’s position is set to its top-left at 50%, then translate(-50%, -50%) shifts it back by half its own size. (Flex / grid centering is usually simpler now, but this still comes up.)

3D Transforms

.card {
  perspective: 1000px;
}
.card-inner {
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

3D rotations need a perspective somewhere (usually on the parent). Less common in production but useful for flip cards and small flourishes.

Why Transforms Are Fast

The browser can offload transforms to the GPU. Animating transform and opacity is much smoother than animating top/left/width/height.

Up Next

Animating between states with transition.