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
selektor {
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:
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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 %):
<div id="elem">lorem ipsum</div>
#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:
<div id="elem">lorem ipsum</div>
#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):
<div id="elem">lorem ipsum</div>
#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:
<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);
}
:
Příklad
Nyní nastavme jako bod transformace 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);
}
:
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:
<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);
}
:
