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);
}
:
