CSS-свойство transform-origin

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

Значение по умолчанию:	`50% 50% 0`
Применяется к:	Трансформируемые элементы
Наследование:	Нет
Анимирование:	Да. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

transform-origin: x-position | y-position | z-position | initial | inherit

Если для свойства transform-origin указано только одно значение, второе значение считается center, что равно значению 50%.

Примеры написания кода свойства transform-origin:

img {
    /* Chrome, Safari, Opera */
    -webkit-transform: rotate(30deg);
    -webkit-transform-origin: 25% bottom;
    /* Firefox */
    -moz-transform: rotate(30deg);
    -moz-transform-origin: 25% bottom;
    /* IE 9 */
    -ms-transform: rotate(30deg);
    -ms-transform-origin: 25% bottom;
    /* Standard syntax */
    transform: rotate(30deg);
    transform-origin: 25% bottom;
}

Если хотя бы одно из двух значений не является ключевым словом, то первое значение представляет горизонтальную позицию (или смещение), а второе значение представляет вертикальную позицию (или смещение) источника преобразования.

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`x-position`	Представляет горизонтальное положение (или смещение) исходного положения. Может принимать одно из следующих значений: percentage — Определяет процентное смещение относительно ширины элемента; length — Определяет точное значение смещения относительно ширины элемента; `left` — Равно 0% ширины, самая левая точка элемента; `center` — Равно 50% ширины, центральная точка элемента; `right` — Равно 100% ширины, самая правая точка элемента.
`y-position`	Представляет вертикальную позицию (или смещение) исходного положения. Может принимать одно из следующих значений: percentage — Определяет процентное смещение относительно высоты элемента; length — Определяет точное значение смещения относительно высоты элемента; `top` — Равно 0% высоты, самая верхняя точка элемента; `center` — Равно 50% высоты, середина элемента; `bottom` — Равно 100% высоты, самая нижняя точка элемента.
`z-position`	Значение length, определяющее, насколько далеко от глаз пользователя установлен источник `Z = 0` (для 3D-преобразований). Значения в процентах недействительны.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `transform-origin`.