⌘K

Vlastnost transform-origin

Vlastnost transform-origin nastavuje bod, vůči kterému budou probíhat transformace elementu, nastavované vlastností transform. Ve výchozím nastavení je tento bod - střed elementu, a například rotace bude probíhat vůči jeho středu. Toto chování však lze změnit a přinutit element rotovat vůči své straně, rohu nebo dokonce vůči bodu, který leží mimo element.

Syntaxe

cssselektor {
  transform-origin: osa-X osa-Y osa-Z;
}

Hodnoty pro osy Y a Z nejsou povinné, lze je vynechat (přijmou výchozí hodnoty). Posun bodu podél osy Z je potřebný pro 3D transformace.

Hodnoty pro osu X

Hodnota Popis
CSS jednotky Hodnotou jsou libovolné jednotky pro velikosti, které nastavují odstup středu transformace od levého okraje elementu. Kladná hodnota posouvá střed transformace doprava (dovnitř elementu), záporná hodnota - doleva (ven z elementu) vzhledem k levému okraji elementu.
left Bod otáčení v horizontálním směru na levém okraji elementu.
right Bod otáčení v horizontálním směru na pravém okraji elementu.
center Bod otáčení v horizontálním směru ve středu elementu.

Výchozí hodnota: center.

Hodnoty pro osu Y

Hodnota Popis
CSS jednotky Hodnotou jsou libovolné jednotky pro velikosti, které nastavují odstup středu transformace od horního okraje elementu. Kladná hodnota posouvá střed transformace dolů (dovnitř elementu), záporná hodnota - nahoru (ven z elementu) vzhledem k hornímu okraji elementu.
top Bod otáčení ve vertikálním směru na horním okraji elementu.
bottom Bod otáčení ve vertikálním směru na dolním okraji elementu.
center Bod otáčení ve vertikálním směru ve středu elementu.

Výchozí hodnota: center.

Hodnoty pro osu Z

Hodnota Popis
CSS jednotky Hodnotou jsou libovolné jednotky pro velikosti, které nastavují odstup středu transformace od roviny elementu. Kladná hodnota jej posouvá k nám (od roviny obrazovky), záporná hodnota od nás.

Výchozí hodnota: 0px.

Příklad

Nyní není hodnota vlastnosti transform-origin nastavena a blok se otočí vůči svému středu. Najedete myší na blok, abyste viděli 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);
}

Результат:

Příklad

Nyní se blok při najetí myší otočí vůči hornímu levé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);
}

Результат:

Příklad

Nyní se blok při najetí myší otočí vůči pravému dolnímu rohu. K tomu je třeba umístit bod transformace na 100% doprava a na 100% dolů (šlo by nastavit i v px, ale při změně velikosti elementu by bod transformace zůstal na místě, proto je lepší použít %): 

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);
}

Результат:

Příklad

Otočíme blok vůči 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);
}

Результат:

Příklad

Otočíme blok vůči středu levé strany. K tomu pro osu X nastavíme left (bod otáčení bude vlevo), a pro osu Y - center (bod otáčení bude uprostřed ve vertikálním směru): 

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);
}

Результат:

Příklad

Vlastnost lze nastavovat nejen pro rotaci, ale i pro jiné transformace. Zvětšeme měřítko pomocí scale, přičemž bod transformace nastavíme jako levý 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);
}

Результат:

Příklad

Nyní nastavme jako bod transformace 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);
}

Результат:

Příklad

Bod transformace lze nastavit i mimo element. V následujícím příkladu při najetí myší na červený blok černý blok provede rotaci vůči bodu, který se nachází mimo něj: 

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);
}

Результат:

BackVlastnost transformNextFunkce rotate