Генератор CSS transform

Да, и это главная ловушка. Функции применяются справа налево, каждая — к уже преобразованной системе координат. translateX(100px) rotate(45deg) сдвинет вправо и повернёт на месте, а rotate(45deg) translateX(100px) сначала повернёт оси, и сдвиг пойдёт по диагонали. Инструмент держит фиксированный порядок, чтобы результат был предсказуем.

Потому что он применяется на этапе отрисовки, а не разметки: браузер уже посчитал, где элемент занимает место, и сдвигает только картинку. Отсюда и главный плюс: анимация transform не вызывает пересчёт разметки и идёт на видеокарте. Отсюда же минус — сдвинутый элемент может наехать на соседа.

Точка, вокруг которой происходит поворот и от которой считается масштаб. По умолчанию центр элемента. Сдвиньте её в левый верхний угол — и поворот превратится в качание, как у стрелки часов. Задаётся двумя значениями: по горизонтали и по вертикали, в процентах или пикселях.

Она задаёт расстояние от зрителя до плоскости экрана. Без неё поворот вокруг горизонтальной оси просто сплющивает элемент, потому что нет схождения линий. Значение — это дистанция: 300px даёт резкую, почти театральную перспективу, 1200px — мягкую и естественную.

От размеров самого элемента, а не родителя. translateX(50%) сдвинет блок на половину его собственной ширины. Это удобно для центрирования: пара left: 50% и translateX(-50%) ставит элемент по центру независимо от его ширины.

Растягивает его как картинку, вместе с толщиной букв и размытием на дробных значениях. Для увеличения текста лучше менять font-size: буквы отрисуются заново и останутся резкими. scale уместен для анимации при наведении, где размытие незаметно.

Нет, всё собирается в браузере.