Transforms

Transforms

Move, rotate, and scale elements, visually, without touching layout flow.

translate()

Move the element:

.box {
  transform: translate(20px, 10px);  /* right 20px, down 10px */
  transform: translateX(50px);
  transform: translateY(-20px);
}

rotate()

Spin it (degrees or turns):

.box {
  transform: rotate(45deg);
  transform: rotate(0.25turn);
}

scale()

Grow/shrink:

.box {
  transform: scale(1.5);       /* 150% */
  transform: scale(2, 0.5);    /* wide but squashed */
}

skew()

Slant it:

.box {
  transform: skew(10deg, 5deg);
}

Combining transforms

Space-separated:

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

Order matters, they apply right-to-left!

transform-origin

Anchor point (default center):

.box {
  transform-origin: top left;
  transform: rotate(45deg);
}

The absolute centering trick

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

Moves the element half its size up-left => perfectly centered.

3D button

rotateX/rotateY, plus perspective on the parent for a 3D scene. Comes in a later lesson!

TL;DR

• transform: translate, rotate, scale, skew.
• Combine with spaces, order matters.
• transform-origin picks the pivot.
• translate(-50%,-50%) centers absolutely.