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

Свойство transform-origin устанавливает исходную точку трансформации элемента. По умолчанию для свойства transform-origin используется значение 50% 50% 0, представляющее собой центр элемента. Первое значение указывает X координату, или смещение влево или право, второе значение указывает Y координату, или смещение вверх или вниз, эти значения вычисляются от верхнего левого угла элемента. Третье значение задает смещение по оси Z, имеющее смысл при 3D-трансформации.

Свойство transform-origin используется вместе со свойством transform.

CSS синтаксис

transform-origin: x-ось y-ось z-ось | initial | inherit;

Возможные значения

ЗначениеОписание
x-ось

Задает изменение позиции по оси X.

Возможные значения:

  • left
  • center
  • right
  • расстояние (в допустимых в CSS единицах)
  • %
y-ось

Задает изменение позиции по оси Y.

Возможные значения:

  • left
  • center
  • right
  • расстояние (в допустимых в CSS единицах)
  • %
z-ось

Задает изменение позиции по оси Z (для 3D-трансформации).

Возможные значения:

  • расстояние (в допустимых в CSS единицах)
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Устанавливаем базовое расположение для трансформируемого элемента


div {
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    transform-origin: 20% 40%;
}