transform-origin īpašība
Īpašība transform-origin nosaka punktu,
attiecībā pret kuru notiks elementa transformācijas,
kas norādītas ar īpašību transform.
Pēc noklusējuma šis punkts ir elementa centrs,
un, piemēram, rotācija notiks attiecībā pret
tā centru. Tomēr šo uzvedību var mainīt
un likt elementam griezties attiecībā pret
tā malu, stūri vai pat attiecībā pret
punktu, kas atrodas ārpus elementa.
Sintakse
selektors {
transform-origin: X-ass Y-ass Z-ass;
}
Vērtības pa Y un Z asīm nav obligātas, tās var izlaist (tās pieņems noklusējuma vērtības). Punkta nobīde pa Z asi ir nepieciešama 3D transformācijām.
Vērtības X asij
| Vērtība | Apraksts |
|---|---|
| CSS mērvienības | Kā vērtību var izmantot jebkuras izmēru mērvienības, kuras nosaka transformācijas centra nobīdi no elementa kreisās malas. Pozitīva vērtība pārvieto transformācijas centru pa labi (elementa iekšpusē), bet negatīva - pa kreisi (ārpus elementa) attiecībā pret elementa kreiso malu. |
left |
Rotācijas punkts horizontāli uz elementa kreisās malas. |
right |
Rotācijas punkts horizontāli uz elementa labās malas. |
center |
Rotācijas punkts horizontāli elementa centrā. |
Noklusējuma vērtība: center.
Vērtības Y asij
| Vērtība | Apraksts |
|---|---|
| CSS mērvienības | Kā vērtību var izmantot jebkuras izmēru mērvienības, kuras nosaka transformācijas centra nobīdi no elementa augšējās malas. Pozitīva vērtība pārvieto transformācijas centru uz leju (elementa iekšpusē), bet negatīva - uz augšu (ārpus elementa) attiecībā pret elementa augšējo malu. |
top |
Rotācijas punkts vertikāli uz elementa augšējās malas. |
bottom |
Rotācijas punkts vertikāli uz elementa apakšējās malas. |
center |
Rotācijas punkts vertikāli elementa centrā. |
Noklusējuma vērtība: center.
Vērtības Z asij
| Vērtība | Apraksts |
|---|---|
| CSS mērvienības | Kā vērtību var izmantot jebkuras izmēru mērvienības, kuras nosaka transformācijas centra nobīdi no elementa plaknes. Pozitīva vērtība pārvieto to uz mums (prom no ekrāna plaknes), bet negatīva - prom no mums. |
Noklusējuma vērtība: 0px.
Piemērs
Šobrīd transform-origin īpašības vērtība nav norādīta un bloks griezīsies attiecībā pret savu centru. Novietojiet peles kursoru virs bloka, lai redzētu efektu:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Piemērs
Tagad, novietojot kursoru, bloks griezīsies attiecībā pret augšējo kreiso stūri:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Piemērs
Tagad, novietojot kursoru, bloks griezīsies attiecībā pret
apakšējo labo stūri. Lai to izdarītu, transformācijas punktu
jānoved 100% pa labi
un 100% uz leju (varētu norādīt
arī px, bet, mainot elementa izmērus,
transformācijas punkts paliktu vietā,
tāpēc labāk ir izmantot %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Piemērs
Griezīsim bloku attiecībā pret augšējo labo stūri:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Piemērs
Griezīsim bloku attiecībā pret kreisās malas centru.
Lai to izdarītu, X asij jānorāda left (rotācijas
punkts būs kreisajā pusē), bet Y asij - center
(rotācijas punkts būs vertikāli centrā):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Piemērs
Īpašību var norādīt ne tikai rotācijai,
bet arī citām transformācijām. Palielināsim
mērogu, izmantojot scale, norādot transformācijas
punktu kā apakšējo kreiso stūri:
<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);
}
:
Piemērs
Tagad norādīsim transformācijas punktu kā augšējo labo stūri:
<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);
}
:
Piemērs
Transformācijas punktu var norādīt arī ārpus elementa. Nākamajā piemērā, novietojot peles kursoru virs sarkanā bloka, melnais bloks veiks rotāciju attiecībā pret punktu, kas atrodas ārpusē:
<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);
}
:
