Transform — одно из тех свойств CSS, которое на первый взгляд кажется чисто декоративным, а на практике оказывается одним из самых полезных инструментов и для статичного оформления, и для анимации. Оно позволяет менять положение, размер и поворот элемента, не затрагивая раскладку страницы вокруг него.
Scale увеличивает или уменьшает элемент — значение больше единицы делает его крупнее, меньше единицы — мельче. Именно scale чаще всего используют для лёгкого увеличения карточки или кнопки при наведении, потому что в отличие от изменения width и height это не заставляет соседние элементы сдвигаться.
Rotate поворачивает элемент на заданный угол, translate смещает его по горизонтали и вертикали. Комбинация нескольких трансформаций в одном свойстве через пробел применяется одновременно, что позволяет, например, и сдвинуть, и повернуть элемент за один переход.
Важное отличие transform от обычного изменения position или margin в том, что трансформация не влияет на поток документа — элемент визуально сдвигается или меняет размер, но место, которое он занимает с точки зрения раскладки соседних элементов, остаётся прежним. Это делает transform особенно удобным именно для анимации.
Свойство transform-origin определяет точку, относительно которой происходит масштабирование или поворот — по умолчанию это центр элемента, но её можно сместить к любому краю или углу, и тогда, например, поворот будет происходить не вокруг центра, а вокруг заданной точки.
Браузеры оптимизируют обработку transform особенно хорошо, часто выполняя такие анимации на видеокарте, а не на центральном процессоре, что делает transitions и animation на transform одними из самых плавных доступных вариантов анимации в вебе.
Полный список функций transform с интерактивными примерами есть в статье про transform на MDN.
