Vlastnosť transform-origin
Vlastnosť transform-origin nastavuje bod,
vzťahom ku ktorému budú prebiehať transformácie
elementu, nastavované vlastnosťou transform.
Predvolene je tento bod - centrum elementu,
a napríklad rotácia bude prebiehať vzťahom ku
jeho stredu. Avšak, toto správanie je možné zmeniť
a prinútiť element rotovať vzťahom ku
svojej strane, rohu alebo vo všeobecnosti vzťahom ku
bodu, ktorý leží mimo elementu.
Syntax
selektor {
transform-origin: X-os Y-os Z-os;
}
Hodnoty po osi Y a Z nie sú povinné, je možné ich vynechať (nadobudnú predvolené hodnoty). Posun bodu po osi Z je potrebný pre 3D transformácie.
Hodnoty pre os X
| Hodnota | Popis |
|---|---|
| CSS jednotky | Hodnotou sú ľubovoľné jednotky pre veľkosti, ktoré nastavujú odsadenie stredu transformácie od ľavého okraja elementu. Kladná hodnota posúva stred transformácie doprava (dovnútra elementu), a záporná - doľava (von z elementu) vzťahom ku ľavému okraju elementu. |
left |
Bod rotácie horizontálne na ľavom okraji elementu. |
right |
Bod rotácie horizontálne na pravom okraji elementu. |
center |
Bod rotácie horizontálne v strede elementu. |
Predvolená hodnota: center.
Hodnoty pre os Y
| Hodnota | Popis |
|---|---|
| CSS jednotky | Hodnotou sú ľubovoľné jednotky pre veľkosti, ktoré nastavujú odsadenie stredu transformácie od horného okraja elementu. Kladná hodnota posúva stred transformácie nadol (dovnútra elementu), a záporná - hore (zvnútra elementu) vzťahom ku hornému okraju elementu. |
top |
Bod rotácie vertikálne na hornom okraji elementu. |
bottom |
Bod rotácie vertikálne na dolnom okraji elementu. |
center |
Bod rotácie vertikálne v strede elementu. |
Predvolená hodnota: center.
Hodnoty pre os Z
| Hodnota | Popis |
|---|---|
| CSS jednotky | Hodnotou sú ľubovoľné jednotky pre veľkosti, ktoré nastavujú odsadenie stredu transformácie od roviny elementu. Kladná hodnota ho posúva na nás (od roviny obrazovky), a záporná od nás. |
Predvolená hodnota: 0px.
Príklad
Teraz nie je hodnota vlastnosti transform-origin nastavená a blok sa otočí vzťahom ku svojmu stredu. Prejdite myšou nad blok, aby ste videli efekt:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Príklad
A teraz pri prejdení myšou sa blok otočí vzťahom ku hornému ľavému rohu:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Príklad
A teraz pri prejdení myšou sa blok otočí vzťahom ku
pravému dolnému rohu. Preto je potrebné umiestniť
bod transformácie na 100% doprava
a na 100% nadol (bolo by možné nastaviť
aj px, ale pri zmene veľkosti elementu
by bod transformácie zostal na mieste,
preto je lepšie nastaviť v %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Príklad
Otočme blok vzťahom ku pravému hornému rohu:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Príklad
Otočme blok vzťahom ku stredu ľavej strany.
Preto pre os X nastavíme left (bod
rotácie bude vľavo), a pre os Y - center
(bod rotácie bude v strede vertikálne):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Príklad
Vlastnosť je možné nastaviť nielen pre rotáciu,
ale aj pre iné transformácie. Zväčšime
mierku pomocou scale, pričom bod
transformácie určíme ako ľavý dolný roh:
<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);
}
:
Príklad
A teraz nastavme bod transformácie ako pravý horný roh:
<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);
}
:
Príklad
Bod transformácie je možné nastaviť aj mimo elementu. V nasledujúcom príklade pri prejdení myšou nad červený blok čierny blok vykoná rotáciu vzťahom ku bodu, ktorý sa nachádza zvonku:
<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);
}
:
