1 августа 2023 года .

О порядке применения трансформаций

Блок трансформируется по матрице преобразования, которая вычисляется из единичной матрицы применением свойств transform, transform-origin, translate, rotate и scale.

Они применяется в следующем порядке:

1. Меняем центр трансформации блока согласно свойству transform-origin.
2. Перемещаем на расстояния из свойства translate по всем осям.
3. Поворачиваем на углы из свойства rotate по всем осям.
4. Масштабируем на вычисленные значения scale по всем осям.
5. Применяем каждую из функций свойства transform по списку слева направо.

Что это значит на практике?

Используя индивидуальные свойства трансформаций невозможно контролировать порядок их применения.

Тогда как функции в свойстве transform применяются в таком порядке, в каком они указаны:

Так же из transform применяются ВСЕ функции, а индивидуальные свойства трансформации переопределяют друг друга как просто css-свойства.

Источники

• Спецификация css-transforms-2.