2D Transforms: Rotate, Scale, Translate, and Skew

Spin it, Stretch it, Slide it, Skew it

These four transforms are the foundation of everything that comes next. We’ll keep each one clean and obvious, with a ghost object showing the original position.

---

Translate (Slide it)

translate() shifts an element on the X and/or Y axis without affecting layout flow of elements around it.

Ghost = original position. Solid = translated.

.monkey {
  transform: translate(70px, -30px);
}

---

Rotate (Spin it)

rotate() turns an element around an axis.

The default axis is Z, the one pointing right at us.

The value is in degrees, clockwise, expressed from (0deg) to (360deg) and beyond.

We can also rotateX() and rotateY().

Rotation around a pivot (origin).

(We’ll dive into origin stories, very soon)

.monkey {
  transform: rotate(45deg);
}

---

Scale (grow it/shrink it)

scale() changes visual size without changing layout size.

It’s the not-at-all-pushy way to grow.

Layout space stays the same — only the pixels grow.

.monkey {
  transform: scale(0.65);
}

---

Skew (tilt it)

skew() slants an element along X and/or Y.

We can provide both X and Y values with skew(x, y), or we can skewX() or skewY().

There is no skewZ(). For that we’d need to enter the matrix3d(), and we’re in flatland here.

Skew is subtle in real UI — dramatic here so it’s obvious.

.monkey {
  transform: skew(-14deg, 6deg);
}

---

Stacking transforms

We can transform: multiple things at a time.

Individual transforms are separated by space and applied in sequence.

.monkey {
  transform: translate(40px, -10px) rotate(12deg) scale(1.1);
}

Order matters. We’ll we why when we talk assemblies.