Transform-origin в CSS это свойство, которое устанавливает точку, вокруг которой происходит трансформация элемента при использовании свойства transform.

Transform-origin устанавливает точку с помощью двух значений: горизонтальной и вертикальной координаты, которые определяются в процентах или значениях пикселей. Значения могут быть положительными, отрицательными или равными нулю.

Синтаксис выглядит следующим образом:

transform-origin: x-axis y-axis;

Значения для x-axis и y-axis могут быть заданы в процентах, пикселях или других единицах измерения CSS.

Например, чтобы установить точку трансформации в центр элемента, используйте следующие значения:

transform-origin: 50% 50%;

Если нужно установить точку трансформации в левый верхний угол элемента, используйте следующий код:

transform-origin: 0% 0%;

Чтобы установить точку трансформации справа и сверху от элемента, которая находится на расстоянии 20 пикселей, используйте следующий код:

transform-origin: right top 20px;

Transform-origin применяется только к элементам, которые используют свойство transform. Если свойство transform не используется для элемента, то свойство transform-origin не будет иметь никакого эффекта.