⌘K

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

cssselektor {
  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: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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 %): 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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): 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="hover"></div>
<div id="elem"></div>
css#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);
}

Результат:

BackVlastnosť transformNextFunkcia rotate