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

Рекомендуемые курсы:

Определение и использование

Атрибут transform-origin позволяет вам изменить положение элемента, который преобразуется.

Элементы 2D-трансформации могут изменять элементы по осям x и y. Элементы 3D-трансформации также могут изменять их по оси Z.Демонстрация.

Чтобы лучше понять атрибут transform-origin, посмотрите этотДемонстрация.

Пользователи Safari/Chrome: Чтобы лучше понять, как используется атрибут transform-origin для 3D-трансформаций, посмотрите этотКомментарий: transform атрибуты.

Чтобы лучше понять атрибут transform, посмотрите этотДемонстрация.

См. также:

Учебник CSS3:2D преобразование в CSS3

Учебник CSS3:3D преобразование в CSS3

Руководство по HTML DOM:Атрибут transformOrigin

Пример

Установите базовую точкуposition旋转 элемента:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

Попробуйте сами

На странице есть больше примеров.

CSS грамматика

transform-origin: x-axis y-axis z-axis;

Значение атрибута

Значение Описание
x-axis

Определяет, где находится вид на X-оси. Возможные значения:

  • left
  • center
  • right
  • length
  • %
y-axis

Определяет, где находится вид на Y-оси. Возможные значения:

  • top
  • center
  • bottom
  • length
  • %
z-axis

Определяет, где находится вид на Z-оси. Возможные значения:

  • length

Технические детали

Default value: 50% 50% 0
Инheritance: нет
Версия: CSS3
JavaScript грамматика: объект.style.transformOrigin="20% 40%"

Поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая поддерживает этот атрибут без префиксов.

Числа в таблице указывают на первую версию браузера, которая поддерживает этот атрибут с префиксами -webkit-, -moz- или -ms-.

атрибут Chrome IE Firefox Safari Opera
transform-origin
(двузначная грамматика)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(трехзначная грамматика)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-