Хосияти 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);
}
:
