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

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

## Синтаксис

`селектор { transform-origin: X-ось Y-ось Z-ось; }`

Значения по осям Y и Z не являются обязательными, можно их опускать (они примут значения по умолчанию). Сдвиг точки по оси Z нужен для 3D трансформаций.

## Значения для оси X

Значение | Описание
--- | ---
CSS единицы | Значением служат любые единицы для размеров, которые задают отступ центра трансформации от левой границы элемента. Положительное значение сдвигает центр трансформации вправо (вовнутрь элемента), а отрицательное - влево (наружу от элемента) относительно левой границы элемента.
`left` | Точка вращения по горизонтали на левой границе элемента.
`right` | Точка вращения по горизонтали на правой границе элемента.
`center` | Точка вращения по горизонтали в центре элемента.

Значение по умолчанию: `center`.

## Значения для оси Y

Значение | Описание
--- | ---
CSS единицы | Значением служат любые единицы для размеров, которые задают отступ центра трансформации от верхней границы элемента. Положительное значение сдвигает центр трансформации вниз (вовнутрь элемента), а отрицательное - вверх (снаружу элемента) относительно верхней границы элемента.
`top` | Точка вращения по вертикали на верхней границе элемента.
`bottom` | Точка вращения по вертикали на нижней границе элемента.
`center` | Точка вращения по вертикали в центре элемента.

Значение по умолчанию: `center`.

## Значения по оси Z

Значение | Описание
--- | ---
CSS единицы | Значением служат любые единицы для размеров, которые задают отступ центра трансформации от плоскости элемента. Положительное значение сдвигает его на нас (от плоскости экрана), а отрицательное от нас.

Значение по умолчанию: `0px`.

## Пример

Сейчас значение свойства transform-origin не задано и блок повернется относительно своего центра. Наведите мышкой на блок, чтобы увидеть эффект:

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: center center; transform: rotate(30deg); }`

:

## Пример

А теперь при наведении блок повернется относительно верхнего левого угла:

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: 0px 0px; transform: rotate(30deg); }`

:

## Пример

А теперь при наведении блок повернется относительно правого нижнего угла. Для этого следует отнести точку трансформации на `100%` вправо и на `100%` вниз (можно было бы задать и px, но при изменении размеров элемента точка трансформации осталась бы на месте, поэтому лучше делать в %):

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: 100% 100%; transform: rotate(30deg); }`

:

## Пример

Повернем блок относительно правого верхнего угла:

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: 100% 0%; transform: rotate(30deg); }`

:

## Пример

Повернем блок относительно центра левой стороны. Для этого для оси X зададим `left` (точка вращения будет слева), а для оси Y - `center` (точка вращения будет по центру по вертикали):

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: left center; transform: rotate(30deg); }`

:

## Пример

Свойство можно задавать не только для вращения, но и для других трансформаций. Давайте увеличим масштаб с помощью `scale`, указав точку трансформации как левый нижний угол:

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: left bottom; transform: scale(1.5); }`

:

## Пример

А теперь укажем точкой трансформации как правый верхний угол:

`<div id="elem">lorem ipsum</div>` `#elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform-origin: right top; transform: scale(1.5); }`

:

## Пример

Точку трансформации можно задавать и вне элемента. В следующем примере по наведению мышкой на красный блок черный блок осуществит поворот относительно точки, которая находится снаружи:

`<div id="hover"></div> <div id="elem"></div>` `#hover { border: 1px solid red; width: 50px; height: 50px; } #elem { border: 1px solid black; width: 100px; height: 50px; transition: transform 1s; transform-origin: -100px -100px; } #hover:hover + #elem { transform: rotate(30deg); }`

:

← →
↑
en ru