тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Свойство 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); }

: