Transform

Definition

The `transform` CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Explain Like I'm New

It's a way to physically manipulate a box without breaking the layout of the webpage. If you use `margin-top: 50px` to move a box down, you push everything else on the page down too. If you use `transform: translateY(50px)`, the box visually moves down, but it leaves a 'ghost' behind, so the rest of the webpage doesn't move an inch.

Real World Example

Using `transform: scale(1.1)` on a button hover to make it pop out at the user without pushing the surrounding text away.

Common Use Cases

•High-performance animations (60 FPS GPU hardware acceleration)

Interactive Example

Interview Questions

basic

Why is animating `transform` better than animating `margin` or `top`?

intermediate

Can you apply multiple transforms at the same time?

Flash Cards

Question

Why is it better?

Click to reveal answer

Answer

Performance. Changing margins or widths causes the browser to recalculate the entire page layout (Reflow), which is incredibly CPU heavy and causes stuttering. `transform` is handed off directly to the GPU (Graphics Card), making the animation a buttery smooth 60 Frames Per Second.

Question

Multiple transforms?

Click to reveal answer

Answer

Yes! You chain them together separated by a space. Example: `transform: scale(1.5) rotate(45deg);`.