Translate, Scale, Rotate

Definition

While historically these were functions passed into the `transform` property, modern CSS allows you to declare `translate`, `scale`, and `rotate` as independent CSS properties.

Explain Like I'm New

The old way was annoying: if you wanted to rotate a box that was ALREADY scaled, you had to write `transform: scale(1.5) rotate(45deg)`. If you forgot the `scale`, it would shrink back down. The new way lets you animate them completely independently: `scale: 1.5;` and `rotate: 45deg;`.

Real World Example

Writing much cleaner hover and keyframe animations without having to copy/paste massive `transform` strings.

Common Use Cases

•Cleaner CSS code
•Independent animation control

Interactive Example

Interview Questions

basic

What does `scale: 0.5;` do to an element?

intermediate

Why are independent transform properties better than the single `transform` property?

Flash Cards

Question

What does scale do?

Click to reveal answer

Answer

It visually shrinks the element to 50% of its normal size.

Question

Why better?

Click to reveal answer

Answer

It solves the 'overwriting' problem. If you use the single `transform` property to rotate an element on `:hover`, it will accidentally delete any `translate` positioning you applied to the base element. Independent properties don't interfere with each other.