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



София Валитова проверила по спецификации, в каком порядке применяются CSS-свойства transform, transform-origin, translate, rotate и scale, и на примерах показывает, чем задание индивидуальных свойств отличается от задания частей свойства transform.



Напомню, теперь во всех основных браузерах есть индивидуальные свойства трансформации, то есть вместо transform: scale(1.2) можно писать scale: 1.2. Помню, в чатике Веб-стандартов была заруба, что чаще всего нет разницы, как писать эти трансформации, потому что редко мы используем сложные трансформации, где подряд несколько translate, например. А я недавно как раз наткнулся на такой случай, где трансформации из библиотеки мешали трансформациям из дизайн-системы. В общем, однозначно полезная заметка от Софии, которая поможет не путаться.



Кстати, у Софии есть свой канал, где она делится похожими находками из мира CSS, подписывайтесь: https://t.me/css_mind.



https://ru.ariarzer.dev/2023/notes/transformation_order/index.html