11. diel - Rotácia elementov

V predchádzajúcej lekcii, Priebehy animácií elementov , sme si ukázali, ako vyzerajú prednastavené priebehy animácií v CSS a urobili si aj vlastné.

Vitajte u ďalšej lekcie ohľadom animácií v CSS 3, v ktorej si ukážeme, ako sa dajú elementy otáčať v 2D aj 3D priestore. V tejto lekcii sa naučíme nasledujúce:

Matrix a Matrix3D

V tejto lekcii si ukážeme, ako funguje otáčanie elementov za pomocou vlastnosti transform. Súhrnne možno všetko ovládať pomocou funkcie matrix3d(), alebo jej skrátené formy matrix(). Pomocou týchto funkcií sme teda schopní nastaviť akékoľvek otočenie, pohyb alebo zmenu veľkosti. Funkcia matrix3d() je však extrémne neprehľadná, pretože pri jej definovaní treba celkom 16 hodnôt. V skrátenej forme sa používa iba 6 hodnôt a funkcia nie je plne schopná dosiahnuť rovnaké efektov. Bežne sa teda s týmito funkciami nestretneme. Pozrieme sa teda na to, ako funkcia vlastne pracuje. Vytvoríme si jednoduchý HTML súbor s elementy:

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

Tým potom upravíme ich triedu, aby vyzerali ako modré obdĺžniky:

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

Pridali sme aj medzeru, nech nemáme elementy animáciou "nalepené" moc na sebe. Výsledok potom bude vyzerať takto:

Teraz každému elementu pre animáciu pridáme ďalšie triedy, tými sú animation-matrix a animation-matrix3D, v ktorých budú nastavené funkcie animácie:

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

Príslušne ju tiež naanimujeme pomocou 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);}
}

Pridaním týchto animačných funkcií spôsobí elementy túto rotáciu:

Keď sa teraz pozrieme do nastavení animácií keyframes animace1 a animace2, funkcie na prvý pohľad vyzerajú ako chaotická kopa číslic. Vysvetlíme si teda, čo tento zápis vlastne znamená. U funkcie matrix() predstavujú prvé a štvrté číslo nastavenie veľkosti elementu (funkcia scale()). Druhé a tretie číslo predstavujú skosenia elementu (funkcia skew()). Piate a šieste číslo potom predstavujú posunutie elementu v smere osi x a osi y (funkcia translate()). Vo funkcii matrix3d() nám ovládajú:

• 1. a 6. číslo - veľkosť (scale())
• 2., 3., 5., 7., 9. a 10. číslo - rotáciu v priestore (rotate())
• 4. a 8. číslo - skosenie elementu (skew())
• 13., 14. a 15. číslo - pozíciu osi x, y a z (translate())

Tieto funkcie sa používajú až vo chvíli, kedy je potrebné vykonať niekoľko zmien u elementu naraz. Pozrieme sa teda na jednotlivé čiastkové funkcie, z ktorých sa toto všetko skladá a sú reálne aj použiteľné.

Rotate

Funkcia rotate() ovláda iba rotáciu okolo osi z. Vytvoríme si teda opäť HTML dokument s naším elementom:

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

V tomto prípade mu ale v CSS nastavíme inú animáciu:

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

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

Nakoniec sa nám bude v prehliadači zobrazovať nasledujúce:

Vďaka tomuto nastaveniu sa nám teda element otočí v smere hodinových ručičiek o 90 stupňov. Ak chceme otáčať element po osi x, y a z, použijeme buď samostatné funkcie rotateX(), rotateY(), rotateZ(), alebo funkciu, ktorá je z týchto troch funkcií zložená. Tou je funkcia rotate3d(). Ako parameter funkcie sa zadáva počet stupňov rotácie.

V kóde to potom vyzerá 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äť nastavíme jemu príslušnú animáciu 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ýsledkom bude týchto niekoľko obdĺžnikov:

Tieto funkcie sa teda pre otáčanie elementov používajú najčastejšie.

Skew

Ako posledný tu máme funkciu skew(), ktorá síce neovláda tak úplne otáčania elementov, ale pôsobí tak, pretože je skosia podľa osi x alebo y. Opäť vezmeme čiastkové funkcie skewX() a skewY(). Funkcia skewX() skosia element podľa osi x, v našom prípade horný a dolný okraj obdĺžnika. Funkcia skewY() skosia element podľa osi y, v našom prípade ľavý a pravý okraj obdĺžnika. Vo všetkých prípadoch sa na vstupe funkciám zadávajú opäť stupňa. Vytvoríme si teda ešte ďalšie tri 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 elementom opäť pridáme špecifické animácie:

.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ánke budeme mať skosenie:

Týmto spôsobom sa teda dá manipulovať elementy okolo osí x, y a z. Ak vám nie je niečo jasné, všetky zobrazené ukážky si môžete stiahnuť v prílohe tejto lekcie a prípadne skontrolovať chybu.

V ďalšej lekcii, Čítač a vlastnosť content v CSS 3 , si ukážeme, ako vytvoriť čítač v CSS 3 a použitie vlastnosti content na niekoľko spôsobov.