Episode 1 — Fundamentals / 1.12 — CSS Animations and Motion Design

1.12.b — CSS Transform

In one sentence: transform lets you move, resize, rotate, and skew an element visually — without affecting document layout flow — and it runs on the GPU compositor, making it the fastest way to animate geometry.

Navigation: ← 1.12.a — CSS Transitions · 1.12.c — 3D Transforms →

1. The transform property

.box {
  transform: translate(20px, 10px) scale(1.2) rotate(15deg);
}

Transforms are applied right to left (matrix multiplication order). The element's original box still occupies its normal position in document flow — transforms are purely visual.

2. Translate — moving elements

Function	What it does
`translateX(value)`	Move horizontally
`translateY(value)`	Move vertically
`translate(x, y)`	Move on both axes

.slide-right { transform: translateX(100px); }
.slide-down  { transform: translateY(50px);  }
.slide-both  { transform: translate(100px, 50px); }

Values can be px, %, em, rem, vw, etc. Percentage is relative to the element's own size, not the parent — extremely useful for centering:

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

3. Scale — resizing elements

Function	What it does
`scale(factor)`	Uniform scale (1 = original)
`scaleX(factor)`	Horizontal only
`scaleY(factor)`	Vertical only
`scale(x, y)`	Independent axes

.grow    { transform: scale(1.5);   }   /* 150% of original */
.shrink  { transform: scale(0.8);   }   /* 80%  of original */
.flip-h  { transform: scaleX(-1);   }   /* mirror horizontally */
.stretch { transform: scale(2, 0.5); }  /* wide and squished */

scale(0) makes the element invisible but it still occupies layout space (unlike display: none).

4. Rotate — spinning elements

.tilt     { transform: rotate(15deg);   }
.flip     { transform: rotate(180deg);  }
.quarter  { transform: rotate(0.25turn); }

Positive values rotate clockwise. Units: deg, turn, rad, grad.

5. Skew — shearing elements

Function	What it does
`skewX(angle)`	Shear horizontally
`skewY(angle)`	Shear vertically
`skew(x, y)`	Both axes

.slant { transform: skewX(-5deg); }

  Before skewX        After skewX(-5deg)
  ┌──────────┐         ╲──────────╲
  │          │          │          │
  │          │          │          │
  └──────────┘         ╱──────────╱

6. Combining transforms

Multiple functions go in a single transform declaration:

.card:hover {
  transform: translateY(-8px) scale(1.02) rotate(-1deg);
}

Order matters. translate then rotate produces a different result than rotate then translate, because each function operates in the coordinate system left by the previous one.

  translate(100px, 0) rotate(45deg)     rotate(45deg) translate(100px, 0)
  ┌───┐                                         ┌───┐
  │ A │──► move right ──► then tilt      │ A │──► tilt ──► move along
  └───┘         ┌─╲                      └───┘            tilted axis
                │  ╲                                    ╲─┐
                ╲   │                                    ╲│

7. `transform-origin`

By default transforms originate from the element's center (50% 50%). Change it:

.door {
  transform-origin: left center;
  transition: transform 400ms ease;
}
.door:hover {
  transform: rotateY(-90deg);
}

Value	Meaning
`center`	Default — middle of the element
`top left`	Upper-left corner
`50% 100%`	Bottom center
`0 0`	Same as `top left`

8. Why transforms are GPU-accelerated

Traditional property change (e.g. width):
  Style → Layout → Paint → Composite   (expensive)

Transform / opacity change:
  Style → Composite                     (fast — skips layout & paint)

The browser can hand the element's texture to the GPU compositor and apply the transform as a matrix operation — no pixel re-painting needed. This is why animation advice always says: "animate transform and opacity, avoid width/height/top/left."

9. Transforms don't affect layout flow

.shifted {
  transform: translateX(200px);
}

The element visually moves 200 px right, but surrounding elements do not reflow. The original space remains occupied. This is both a feature (performance) and a gotcha (elements can overlap).

10. Practical examples

Hover lift effect

.card {
  transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

Icon rotation on hover

.icon-refresh {
  transition: transform 400ms ease-in-out;
}
.icon-refresh:hover {
  transform: rotate(360deg);
}

Image zoom (no layout shift)

.thumb-container {
  overflow: hidden;
  border-radius: 8px;
}
.thumb-container img {
  transition: transform 300ms ease;
}
.thumb-container:hover img {
  transform: scale(1.08);
}

11. Key takeaways

transform is visual only — it never triggers layout reflow.
Four core functions: translate, scale, rotate, skew.
Order of functions matters — transforms compose right-to-left.
transform-origin controls the pivot point.
Transforms + opacity are compositor-only → the cheapest things to animate.

Explain-It Challenge

Explain without notes:

Why transform: translateX(100px) doesn't push siblings out of the way, while margin-left: 100px does.
How transform-origin: top left changes a rotate(45deg) compared to the default center origin.
Why transform: scale(1.5) is cheaper to animate than width: 150% — name the pipeline stages each one triggers.