Свойство transform-origin
Свойство transform-origin элементнинг трансформациялари
transform свойстваси
орқали аникланadigan нуқтани белгилайди.
Демакол бу нуқта - элементнинг маркази,
ва, мисол учун, айланиш унинг марказига нисбатан
бўлади. Бирок, бу ҳаракатни ўзгартириш мумкин
ва элементни ўз томони, бурчаги ёки умуман
элементдан ташқари жойлашган нуқтага нисбатан
айлантириш мумкин.
Синтаксис
селектор {
transform-origin: X-ўқи Y-ўқи Z-ўқи;
}
Y ва Z ўқлари учун қийматлар мажбурий эмас, уларни ташлаб қўйиш мумкин (улар демакол қийматларини олади). Z ўқи бўйича нуқтани силжиш 3D трансформациялар учун зарур.
X ўқи учун қийматлар
| Қиймат | Тасниф |
|---|---|
| CSS ўлчов бирликлари | Қиймат сифатида трансформация марказининг элементнинг чап чегарасидан бўлган мосламасини белгиловчи ҳар қандай ўлчамлар учун бирликлар хизмат қилади. Мусбат қиймат трансформация марказини ўнгга (элемент ичига) силжитади, манфий қиймат эса - чапга (элементдан ташқарига) элементнинг чап чегарасига нисбатан. |
left |
Горизонтал бўйича айланиш нуқтаси элементнинг чап чегарасида. |
right |
Горизонтал бўйича айланиш нуқтаси элементнинг ўнг чегарасида. |
center |
Горизонтал бўйича айланиш нуқтаси элементнинг марказида. |
Демакол қиймат: center.
Y ўқи учун қийматлар
| Қиймат | Тасниф |
|---|---|
| CSS ўлчов бирликлари | Қиймат сифатида трансформация марказининг элементнинг юқори чегарасидан бўлган мосламасини белгиловчи ҳар қандай ўлчамлар учун бирликлар хизмат қилади. Мусбат қиймат трансформация марказини пастга (элемент ичига) силжитади, манфий қиймат эса - юқорига (элементдан ташқарига) элементнинг юқори чегарасига нисбатан. |
top |
Вертикал бўйича айланиш нуқтаси элементнинг юқори чегарасида. |
bottom |
Вертикал бўйича айланиш нуқтаси элементнинг пастки чегарасида. |
center |
Вертикал бўйича айланиш нуқтаси элементнинг марказида. |
Демакол қиймат: center.
Z ўқи учун қийматлар
| Қиймат | Тасниф |
|---|---|
| CSS ўлчов бирликлари | Қиймат сифатида трансформация марказининг элемент tekisligidan бўлган мосламасини белгиловчи ҳар қандай ўлчамлар учун бирликлар хизмат қилади. Мусбат қиймат уни бизга қараб (экран tekisligidan) силжитади, манфий қиймат эса биздан узоқлаштиради. |
Демакол қиймат: 0px.
Мисол
Ҳозирда transform-origin свойствасининг қиймати белгиланмаган ва блок ўз марказига нисбатан бурилади. Таъсирни кўриш учун sichqonchani блок устига олиб келинг:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Мисол
Энди эса sichqoncha олиб келганда блок юқори чап бурчакка нисбатан бурилади:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Мисол
Энди эса sichqoncha олиб келганда блок ўнг
пастки бурчакка нисбатан бурилади. Бунинг учун
трансформация нуқтасини 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);
}
:
Мисол
Трансформация нуқтасини элементдан ташқарида ҳам белгилаш мумкин. Кейинги мисолда sichqonchani қизил блок устига олиб келганда қора блок ташқарида жойлашган нуқтага нисбатан айланиш амалга оширади:
<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);
}
:
