transform-origin касиети
transform-origin касиети,
transform касиети менен
белгиленген элементтин трансформациялары болочок чекитти белгилейт.
Демейки абалда бул чекит - элементтин борбору,
жана, мисалы, айлануу анын борборуна салыштырмалуу болот.
Бирок, бул жүрүм-турумду өзгөртүүгө болот
жана элементти өзүнүн капталына, бурчуна же жалпысынан
элементтин сыртында жайгашкан чекитке салыштырмалуу айландырууга мүмкүнчүлүк бар.
Синтаксис
тандоочу {
transform-origin: X-огu Y-огu Z-огu;
}
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);
}
:
