Отличие между свойствами transform и transform-origin в CSS заключается в их назначении:
- transform задаёт вид преобразования элемента. 1 Свойство описывается с помощью функций трансформации, которые смещают элемент относительно его текущего положения на странице или изменяют его первоначальные размеры и форму. 1
- transform-origin позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. 1 Значение по умолчанию — center, или 50% 50%. 1
Таким образом, transform задаёт само преобразование, а transform-origin — исходное положение, откуда оно начинается или строится. 4
Например, с помощью transform можно вращать или наклонять элемент, а transform-origin позволяет указать, куда необходимо перенести начало координат. 3