Порядок свойств внутри transform и анимации

Джейк Арчибальд, как у него в блоге часто бывает, разбирает такой сниппет кода:

.demo {
  transition: transform 1s ease;
}
.demo.zoom {
  transform: scale(3) translate(-33.1%, 20.2%);
}

Простая на первый взгляд анимация, при добавлении класса должно случиться масштабирование в 3 раза и смещение центра картинки на сколько-то процентов. Так и происходит, но почему-то в процессе картинка движется по дуге, а не по прямой линии. Причём дуга чем-то напоминает график изинга ease. Совпадение?

Собственно, в статье на примерах Джейк и объясняет, что под капотом пытается сделать браузер, как правильно полечить это поведение и почему добавление rotate(0) в изначальное состояние тоже внезапно всё чинит.

https://jakearchibald.com/2025/animating-zooming/