Lekce 11 - Rotace elementů v CSS3

V předchozí lekci, Průběhy animací elementů v CSS3, jsme si ukázali, jak vypadají přednastavené průběhy animací v CSS a udělali si i vlastní.

Vítejte u další lekce ohledně animací v CSS3, ve které si ukážeme, jak se dají elementy otáčet ve 2D i 3D prostoru. V této lekci se naučíme následující:

Matrix a Matrix3D

V této lekci si ukážeme, jak funguje otáčení elementů za pomocí vlastnosti transform. Souhrnně lze vše ovládat pomocí funkce matrix3d(), nebo její zkrácené formy matrix(). Pomocí těchto funkcí jsme tedy schopni nastavit jakékoliv otočení, pohyb nebo změnu velikosti. Funkce matrix3d() je však extrémně nepřehledná, protože při jejím definování je třeba celkem 16 hodnot. Ve zkrácené formě se používá pouze 6 hodnot a funkce není plně schopná dosáhnout stejných efektů. Běžně se tedy s těmito funkcemi nesetkáme. Podíváme se tedy na to, jak funkce vlastně pracuje. Vytvoříme si jednoduchý HTML soubor s elementy:

<div class="element">matrix</div>
<div class="mezera"></div>
<div class="element">matrix3D</div>

Těm potom upravíme jejich třídu, aby vypadaly jako modré obdélníky:

.element {
    width: 300px;
    height: 100px;
    background-color: #00386B;
    border: 3px solid darkblue;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.mezera {
    height: 7em;
}

Přidali jsme také mezeru, ať nemáme elementy animací "nalepené" moc na sobě. Výsledek potom bude vypadat takto:

Nyní každému elementu pro animaci přidáme další třídy, těmi jsou animation-matrix a animation-matrix3D, ve kterých budou nastaveny funkce animace:

<div class="element animation-matrix">matrix</div>
<div class="mezera"></div>
<div class="element animation-matrix3D">matrix3D</div>

Příslušně ji také naanimujeme pomocí keyframes:

.animation-matrix {
    animation: animace1 5s linear infinite;
}

.animation-matrix3D {
    animation: animace2 5s linear infinite;
}

@keyframes animace1 {
    0% {transform: matrix(1,0,0,1,0,0);}
    50% {transform: matrix(1,-1,1,1,0,0);}
    100% {transform: matrix(1,0,0,1,0,0);}
}

@keyframes animace2 {
    0% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
    50% {transform: matrix3d(1,0,0,0,0,0,1,0.008,0,-1,0,0,0,0,0,1);}
    100% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);}
}

Přidáním těchto animačních funkcí způsobí elementy tuto rotaci:

Když se nyní podíváme do nastavení animací keyframes animace1 a animace2, funkce na první pohled vypadají jako chaotická kupa číslic. Vysvětlíme si tedy, co tento zápis vlastně znamená. U funkce matrix() představují první a čtvrté číslo nastavení velikosti elementu (funkce scale()). Druhé a třetí číslo představují zkosení elementu (funkce skew()). Páté a šesté číslo potom představují posunutí elementu ve směru osy x a osy y (funkce translate()). Ve funkci matrix3d() nám ovládají:

• 1. a 6. číslo - velikost (funkce scale())
• 2., 3., 5., 7., 9. a 10. číslo - rotaci v prostoru (funkce rotate())
• 4. a 8. číslo - zkosení elementu (funkce skew())
• 13., 14. a 15. číslo - pozici osy x, y a z (funkce translate())

Tyto funkce se používají až ve chvíli, kdy je potřeba provést několik změn u elementu najednou. Podíváme se tedy na jednotlivé dílčí funkce, ze kterých se tohle všechno skládá a jsou reálně i použitelné.

Rotate

Funkce rotate() ovládá pouze rotaci okolo osy z. Vytvoříme si tedy opět HTML dokument s naším elementem:

<div class="element animation-rotate">rotate</div>

V tomto případě mu ale v CSS nastavíme jinou animaci:

.animation-rotate {
    animation: animace3 5s linear infinite;
}

@keyframes animace3{
    0% {transform: rotate(0deg);}
    50% {transform: rotate(90deg);}
    100% {transform: rotate(0deg);}
}

Nakonec se nám bude v prohlížeči zobrazovat následující:

Díky tomuto nastavení se nám tedy element otočí po směru hodinových ručiček o 90 stupňů. Pokud chceme otáčet element po ose x ,y a z, použijeme buď samostatné funkce rotateX(), rotateY(), rotateZ(), nebo funkci, která je z těchto tří funkcí složena. Tou je funkce rotate3d(). Jako parametr funkce se zadává počet stupňů rotace.

V kódu to potom vypadá takto:

<div class="element animation-rotate">rotate</div>
<div class="mezera"></div>
<div class="element animation-rotate3D">rotate3D</div>
<div class="mezera"></div>
<div class="element animation-rotateX">rotateX</div>
<div class="mezera"></div>
<div class="element animation-rotateY">rotateY</div>
<div class="mezera"></div>
<div class="element animation-rotateZ">rotateZ</div>

Každému elementu opět nastavíme jemu příslušnou animaci v CSS:

.animation-rotate {
    animation: animace3 5s linear infinite;
}

.animation-rotate3D {
    animation: animace4 5s linear infinite;
}

.animation-rotateX {
    animation: animace5 5s linear infinite;
}

.animation-rotateY {
    animation: animace6 5s linear infinite;
}

.animation-rotateZ {
    animation: animace7 5s linear infinite;
}

@keyframes animace3 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(90deg);}
    100% {transform: rotate(0deg);}
}

@keyframes animace4 {
    0% {transform: rotate3d(1, 1, 1, 0deg);}
    50% {transform: rotate3d(1, 1, 1, 90deg);}
    100% {transform: rotate3d(1, 1, 1, 0deg);}
}

@keyframes animace5 {
    0% {transform: rotateX(0deg);}
    50% {transform: rotateX(90deg);}
    100% {transform: rotateX(0deg);}
}

@keyframes animace6 {
    0% {transform: rotateY(0deg);}
    50% {transform: rotateY(90deg);}
    100% {transform: rotateY(0deg);}
}

@keyframes animace7 {
    0% {transform: rotateZ(0deg);}
    50% {transform: rotateZ(90deg);}
    100% {transform: rotateZ(0deg);}
}

A výsledkem bude těchto několik obdélníků:

Tyto funkce se tedy pro otáčení elementů používají nejčastěji.

Skew

Jako poslední tu máme funkci skew(), která sice neovládá tak úplně otáčení elementů, ale působí tak, protože je zkosí podle osy x nebo y. Opět vezmeme dílčí funkce skewX() a skewY(). Funkce skewX() zkosí element podle osy x, v našem případě horní a dolní okraj obdélníku. Funkce skewY() zkosí element podle osy y, v našem případě levý a pravý okraj obdélníku. Ve všech případech se na vstupu funkcím zadávají opět stupně. Vytvoříme si tedy ještě další tři elementy:

<div class="element animation-skew">skew</div>
<div class="mezera"></div>
<div class="element animation-skewX">skewX</div>
<div class="mezera"></div>
<div class="element animation-skewY">skewY</div>

Našim elementům opět přidáme specifické animace:

.animation-skew {
    animation: animace8 5s linear infinite;
}

.animation-skewX {
    animation: animace9 5s linear infinite;
}

.animation-skewY {
    animation: animace10 5s linear infinite;
}

@keyframes animace8 {
    0% {transform: skew(0,0);}
    50% {transform: skew(30deg, 30deg);}
    100% {transform: skew(0,0);}
}

@keyframes animace9 {
    0% {transform: skewX(0);}
    50% {transform: skewX(50deg);}
    100% {transform: skewX(0);}
}

@keyframes animace10 {
    0% {transform: skewY(0);}
    50% {transform: skewY(50deg);}
    100% {transform: skewY(0);}
}

Na stránce budeme mít zkosení:

Tímto způsobem se tedy dá manipulovat elementy okolo os x, y a z. Pokud vám není něco jasné, všechny zobrazené ukázky si můžete stáhnout v příloze této lekce a případně zkontrolovat chybu.

V příští lekci, Vlastnost object-fit v CSS3, si představíme vlastnost object-fit, která nám pomůže k zachování kvality obrázku a ochrání nás před jeho deformací.