Теперь, когда древнее зло побеждено, а Пендальф добрался обратно домой, самое время разобраться с ещё одной тонкостью трансформаций, а именно со свойством transform-origin (а также повесить памятную фотокарточку на стену).

Это свойство используется совместно со свойством transform и задаёт точку отсчёта системы координат, в рамках которой будет работать трансформация.

Синтаксис transform-origin для двухмерных трансформаций следующий:

transform-origin: точка-отсчёта-по-X [точка-отсчёта-по-Y]

Значения свойства задаётся в единицах измерения ширины в браузере (px, em...), в %, а также ключевыми словами left, right, top, bottom и center.

По умолчанию, значение transform-origin равно 50% 50%, то есть начало системы координат находится в центре объекта. Если не указывать значение точка-отсчёта-по-Y, то оно считается равным 50%.

Давайте разберёмся на примере функции scale, как ведёт себя трансформация при различных значениях transform-origin: в данном случае блок будет менять размер относительно заданной точки.