Webdesign

Jak snadno vytvořit překlápěcí animace s CSS?

30. března 2015

•

CSS animace poskytují spoustu zábavy; jejich největším pozitivem však je, že prostřednictvím mnohých jednoduchých vlastností dokážete vytvořit prakticky cokoliv, od elegantního přechodu typu rozplývání (fade in) mezi dvěma obrázky, až k takovému efektu, kterým by se chlubilo i studio Pixar. Mezi CSS efekty, které leží někde mezi, patří i překlápění, s jehož pomocí uvidíte líc i rub daného kontejneru. V tomto návodu se dozvíte, jak se takový efekt vytvoří pokud možno co nejjednodušším způsobem.

Mnohé jiné návody přidávají do ukázkového kódu dodatečné styly, což pak od čtenáře vyžaduje, aby dešifroval, které z nich jsou skutečně potřebné, a které ne. V tomto návodu se této záležitosti zcela vyhneme, poskytneme pouze nezbytně nutné styly; každou z překlápěných stran si potom můžete stylováním vyšperkovat, jak je vám libo.

Mrkněte se na demo

HTML

HTML struktura, se kterou docílíme tento dvoustranný efekt, vypadá tak, jak asi očekáváte, že bude vypadat:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- obsah přední strany -->
</div>
<div class="back">
<!-- obsah zadní strany -->
</div>
</div>
</div>

Jsou zde dvě oblasti pro obsah, přední strana („front“) a zadní strana („back“), což asi také očekáváte, navíc jsou však zde dva obsahující elementy. Ty mají velmi specifické poslání, které vysvětlují jejich CSS. Dále si všimněte úseku začínajícího na ontouchstart, který umožňuje prohazovat tyto oblasti na dotykových obrazovkách. Je zřejmé, že pokud si to tak přejete, měli byste takový kód oddělit do nějakého separátního nevtíravého bloku JavaScriptu.

CSS

Jsem ochoten se vsadit, že kromě obvyklé záplavy prefixů výrobců budete překvapeni, jak málo kódu CSS je zapotřebí:

/* celý kontejner, zachovává perspektivu */
.flip-container {
perspective: 1000;
}
/* překlopí, když se najede myší */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
 
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
 
/* zde se stanoví rychlost překlápění */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
 
position: relative;
}
 
/* skryje zadní stranu během prohození */
.front, .back {
backface-visibility: hidden;
 
position: absolute;
top: 0;
left: 0;
}
 
/* přední strana, umístěná na zadní */
.front {
z-index: 2;
/* pro firefox 31 */
transform: rotateY(0deg);
}
 
/* zadní strana, na počátku skrytá */
.back {
transform: rotateY(180deg);
}

Zde máte stručný přehled celého procesu:

Vnější (vzdálenější) kontejner nastaví perspektivu celé animační oblasti.
Vnitřní kontejner je element, který se skutečně překlápí, otočí se o 180 stupňů, když se na rodičovský kontejner najede kurzorem myši. Zde také řídíte rychlost přechodu. Pokud změníte rotaci na -180deg, budou se elementy otáčet opačně.
Elementy front a back jsou pozicované absolutně, takže mohou na téže pozici jeden druhého „překrývat“; jejich vlastnost backface-visibility (viditelnost zadní strany) má hodnotu hidden, takže zadní strana překlápěných elementů se během animace nezobrazuje.
Element front má vyšší z-index než element back, takže se element front může zakódovat jako první, přesto se zobrazí navrchu.
Element back se otočí o 180 stupňů, takže funguje jako zadní strana.

A to je vlastně všechno! Dejte tuto jednoduchou strukturu na vhodné místo a dostylujte si obě strany podle svých představ!

Ana Tudor, expertka na CSS animace, připomíná

Pokud by se na element karty aplikovaly jisté vlastnosti s jistými hodnotami (jako overflow: hidden), neměl by pak povoleno mít 3D transformované potomky. Myslím si, že to je relevantní věc, protože jsem se dostala do potíží právě s overflow: hidden v takových případech, kdy všichni potomci 3D transformovaného elementu byli v téže ploše, ale jeden nebo několik z nich byly otáčené o 180deg.

CSS překlopení přes JavaScript

Pokud dáváte přednost tomu, aby se element překlápěl pouze na základě příkazu přes JavaScript, docílíte to fintou spočívající v přepnutí CSS třídy:

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {

transform: rotateY(180deg);

}

Když třídu flip přidáte do kontejnerového elementu, překlopí se karta pomocí JavaScriptu — není třeba, aby na ní uživatel podržel kurzor. Překlopení zařídí tento JavaScript:

document.querySelector("#myCard").classList.toggle("flip")

Vertikální překlopení

Vertikální překlopení se zařídí velmi snadno. Stačí překlopit osu a dodat hodnotu transform-origin osy. Počátek překlopení se musí aktualizovat a karta otočit opačně:

.vertical.flip-container {

position: relative;

}

 

.vertical .back {

transform: rotateX(180deg);

}

 

.vertical.flip-container .flipper {

transform-origin: 100% 213.5px; /* polovina výšky */

}

 

.vertical.flip-container:hover .flipper {

transform: rotateX(-180deg);

}

Vidíte, že se zde přistupuje k ose X, ne k ose Y.

Jak na Internet Explorer?

Internet Explorer vyžaduje signifikantní modifikace standardního překlápěcího kódu, protože ještě neimplementoval všechny moderní možnosti vlastnosti transform. V podstatě je třeba současně překlápět elementy front i back:

/* celý kontejner, zachovává perspektivu */

.flip-container {

perspective: 1000;

transform-style: preserve-3d;

}

/* AKTUALIZOVÁNO! Překlopí stranu, když se na ni najede kurzorem */

.flip-container:hover .back {

transform: rotateY(0deg);

}

.flip-container:hover .front {

transform: rotateY(180deg);

}

 

.flip-container, .front, .back {

width: 320px;

height: 480px;

}

 

/* zde se stanoví rychlost překlápění */

.flipper {

transition: 0.6s;

transform-style: preserve-3d;

 

position: relative;

}

 

/* skryje zadní stranu během prohození */

.front, .back {

backface-visibility: hidden;

transition: 0.6s;

transform-style: preserve-3d;

 

position: absolute;

top: 0;

left: 0;

}

 

/* AKTUALIZOVÁNO! Přední strana, umístěná na zadní */

.front {

z-index: 2;

transform: rotateY(0deg);

}

 

/* zadní strana, na počátku skrytá */

.back {

transform: rotateY(-180deg);

}

 

/*

Několik aktualizací pro vertikální překlopení

*/

.vertical.flip-container {

position: relative;

}

 

.vertical .back {

transform: rotateX(180deg);

}

 

.vertical.flip-container:hover .back {

transform: rotateX(0deg);

}

 

.vertical.flip-container:hover .front {

transform: rotateX(180deg);

}

S kódem uvedeným výše bude IE10 překlápět elementy tak, jak se od něho očekává!

Mrkněte se na demo

Překlápěcí animace s CSS byla vždy klasickou reprezentativní ukázkou, co všechno je možné docílit s CSS animacemi, a do jisté míry i s 3D CSS animacemi. Ještě lepší je, že k tomu stačí velmi málo CSS. Tento efekt se bude určitě dost hodit pro některé HTML5 hry, a určitě perfektně poslouží jako soběstačný „karetní“ efekt. Nebo si myslíte, že by se vám mohl hodit i k něčemu jinému?