8.2. Funkce transform

Díky vlastnosti transform můžeme měnit naše objekty různými způsoby. Budeme se zde zabývat případy v 2D. Možné operace jsou změna měřítka (zvětšení, zmenšení), pohyb po směru osy X a osy Y, rotace a náklon.

Posouvání

Posouvání po ose X

Posouvání po ose X, neboli doprava a doleva, nám umožňuje vlastnost translateX(hodnota). V příkladu níže posuneme element o 150px vpravo.

transform: translateX(150px);

Pokud bychom chtěli posunout prvkem doleva, museli bychom dát zápornou hodnotu.

transform: translateX(-150px);

Posouvání po ose Y

Posouání po ose Y, neboli nahoru a dolů, nám umožňuje vlastnost translateY(hodnota). Pro posun nahoru slouží kladná čísla, dolů pak záporná.

transform: translateY(150px); /* posun nahoru */
transform: translateY(-150px); /* posun dolu */

Rotace

Některé prvky lze otáčet pomocí vlastnosti rotate(hodnota). Hodnota je dána ve stupních (deg).

Podívejme se, co se stane se čtvercem, kterému přidáme následující vlastnost:

transform: rotate(45deg);

Jak je vidět, element se otočil o 45 stupňů.

Rotace může být v závislosti na třech osách: X, Y a Z.

rotateX(45deg);
rotateY(45deg);
rotateZ(45deg);

Změna měřítka - škálování

Vybraný element můžeme zvětšovat nebo zmenšovat příslušnou hodnotou vlastnosti scale(hodnota)

Základní hodnota vlastnosti je 1. Pokud chceme element zmenšit, používáme hodnoty 0 - 0.9, pro zvětšení pak 1.1+. V příkladu máme tři totožné elementy s vlastností: scale(0.8), scale(1) a scale(1.2).

Zvětšení měřítka na :hover

Při použití pseudotřídy :hover můžeme vytvářet zajímavé efekty nejen pro tlačítka.

.button-scale {
    background-color: salmon;
    padding: 20px 100px;
    display: inline-block;
    margin: 20px 0;
    transition: all 0.3 ease-in-out;
}

.button-scale:hover {
    transform: scale(1.2);  
}

Zvětšovat měřítko je možné i pro osu X a Y

Někdy můžeme chtít zvětšit prvek pouze v jednom rozměru. K tomu nám slouží:

transform: scaleX(hodnota)

transform: scaleY(hodnota)

Náklon

Náklon (zkosení) prvku je možné provádět ve dvou osách: X a Y. Náklon v ose X definuje vlastnost transform: skewX(hodnota);;na ose Y pak transform: skewY(hodnota);. Hodnota je opět zadávána ve stupních (deg).

Elementy s vlastností zkosení na ose X z leva: skewX(10deg), skewX(0) a skewX(-10deg):

Elementy s vlastností zkosení na ose Y z leva: skewY(10deg), skewY(0) a skewY(-10deg):

Složení hodnot vlastnosti transform

Může se stát, že chceme použít více variant vlastnosti transform. Například zkosení na ose X, zvětšení, a rotaci. V takovém případě zapisujeme vlastnosti do jednoho řádku a oddělujeme je mezerou.

transform: skewX(10deg) scale(1.15) rotate(45deg);