Уласцівасць 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);
}
:
