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