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.

Поддержка браузеров

Свойство transform-origin поддерживается во всех основных браузерах.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.