transform-origin

Точка начала преобразования — это точка, относительно которой применяется преобразование. Например, точка начала преобразования функции rotate() — это центр вращения.

Фактически, это свойство заключает в себе пару переводов вокруг других преобразований элемента. Первый перевод перемещает точку начала преобразования в истинное начало координат $(0,0)$. Затем применяются другие преобразования, и поскольку точка начала преобразования находится в $(0,0)$, эти преобразования действуют относительно точки начала преобразования. Наконец, применяется обратный перевод, перемещающий точку начала преобразования обратно в её исходное положение. Вследствие этого определение

transform-origin: -100% 50%;
transform: rotate(45deg);

приводит к тому же преобразованию, что и

transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

Читая справа налево, translate(100%, -50%) — это перевод, чтобы перенести точку начала преобразования в истинное начало координат, rotate(45deg) — это исходное преобразование, а translate(-100%, 50%) — это перевод для возврата точки начала преобразования в её исходное положение.

По умолчанию, начало преобразования — center.

/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;

/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: revert;
transform-origin: revert-layer;
transform-origin: unset;

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

Если определено одно значение <length> или <percentage>, оно представляет собой горизонтальное смещение.

Если определено два или более значений, и ни одно значение не является ключевым словом, или единственное использованное ключевое слово — center, то первое значение представляет собой горизонтальное смещение, а второе — вертикальное смещение.

• Синтаксис с одним значением:

  • Значение должно быть <length>, <percentage>, или одним из ключевых слов left, center, right, top, и bottom.

• Синтаксис с двумя значениями:

  • Одно значение должно быть <length>, <percentage>, или одним из ключевых слов left, center, и right.
  • Другое значение должно быть <length>, <percentage>, или одним из ключевых слов top, center, и bottom.

• Синтаксис с тремя значениями:

  • Первые два значения такие же, как и для синтаксиса с двумя значениями.
  • Третье значение должно быть <length>. Оно всегда представляет смещение по оси Z.

x-смещение

Это <length> или <percentage>, описывающее расстояние от левого края блока до начала преобразования.

ключевое слово смещения

Это одно из left, right, top, bottom, или center ключевых слов, описывающих соответствующее смещение.

y-смещение

Это <length> или <percentage>, описывающее расстояние от верхнего края блока до начала преобразования.

ключевое слово x-смещения

Это одно из left, right, или center ключевых слов, описывающих расстояние от левого края блока до начала преобразования.

ключевое слово y-смещения

Это одно из top, bottom, или center ключевых слов, описывающих расстояние от верхнего края блока до начала преобразования.

z-смещение

Это <length> (и никогда не <percentage>, что сделало бы утверждение недействительным), описывающее расстояние от точки z=0 до зрителя.

Ключевые слова — это удобные сокращения и соответствуют следующим <percentage> значениям:

transform-origin = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>?  |
  [ [ center | left | right ] && [ center | top | bottom ] ] <length>?  

<length-percentage> = 
  <length>      |
  <percentage>  

Этот пример показывает эффект выбора различных значений transform-origin для различных функций преобразования.

• Использование преобразований CSS
• https://css-tricks.com/almanac/properties/t/transform-origin/