Jak vytvořit 3D tlačítka Flip animace s CSS

Překlopte animace jsou populární CSS efekty, které ukazují přední i zadní HTML elementu otočením shora dolů nebo zleva doprava (a naopak). Oni jsou rad ve 2 rozměrech, ale oni jsou dokonce chladnější když provádí ve 3D.

V tomto příspěvku vám ukážu, jak na to vytvořit jednoduchá 3D tlačítka, a přidat animace jim.

Výsledek si můžete prohlédnout v níže uvedeném demu, pokud kliknete na tlačítka, provedou označenou flip animaci.

1. Vytvoření HTML pro tlačítko 3D

Pro vytvoření 3D tlačítka (s Top → Bottom flip) nejprve stohujeme tři

s na sobě, dvě pro přední a zadní stranu tlačítka a třetí pro vyplnění hloubky uprostřed. Položili jsme tři tváře na knoflíky .flipBtn kontejner, který bude fungovat jako tlačítko 3D, a umístíme 3D tlačítko do .flipBtnWrapper obal.

2. Přidání základních stylů pomocí CSS

Nastavili jsme šířka a výška Vlastnosti obálky, tlačítka a tlačítka směřují a umístěte je pomocí techniky relativního / absolutního umístění.

 .flipBtnWrapper width: 200px; výška: 200px; poloha: relativní;  .flipBtn, .flipBtn_face width: 100%; výška: 100%; pozice: absolutní;

3. Styl 3 tlačítek tváře

Přidáme obrázky pozadí k čelním a zadním tlačítkům a nastavíme chladný lineární gradient za obrazy. Trikem je, že v CSS můžete nastavit více obrazů jako obrázek na pozadí pro stejný prvek a můžete také deklarovat přechody jako obrázky na pozadí.

Střední tvář, .flipBtn_mid, je dáno a výška 20px a mezi přední a zadní stranou je vytvořen stejný prostor 20px. Toho dosáhneme pomocí translateZ () CSS funkce, která posouvá prvek podél osy z. Posuneme zadní stranu zpět o 10x a přivedeme přední čelo dopředu o 10px.

 .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), lineární gradient (# FF6366 50%, # FEA56E); viditelnost na pozadí: skryté; transformace: translateZ (10px);  .flipBtn_back background-image: url ("image / css-3d-flip-button-animation-pause.png"), lineární gradient (# FF6366 50%, # FEA56E); barva pozadí: modrá; transformace: translateZ (-10px);  .flipBtn_mid výška: 20px; barva pozadí: # d5485a; transformace: rotateX (90deg); nahoru: -10px;

Na pokrývají prostor mezi přední a zadní stranou se středním, my položte rovnou střední plochu přes rovinu x 3D prostoru pomocí transformace: rotateX (90deg); pravidlo dělá to kolmý na přední i zadní tlačítko směřuje na rovinu y.

Vzhledem k tomu, že střední plocha byla položena naplocho přes rovinu x, její horní bod na ose y jde 10px (polovina její výšky) dolů od originálu. Tak, abych ho vytáhl nahoru a vyrovnal svůj vrchol s dalšími dvěma tlačítky, přidal jsem nahoru: -10px pravidla.

Použil jsem viditelnost Vlastnost CSS pro přední stranu, takže když otočíme tlačítko, zadní strana přední strany nebude viditelná.

Zatím vidíte pouze čelní plochu na obrazovce, protože rovina x je skryta před pohledem a na rovině y (obrazovka) je poslední položená plocha přední.. Otáčením tlačítka budete mít možnost vidět i ostatní tváře.

4. Otáčením tlačítka

Vlastnost CSS v transformačním stylu určuje, zda se podřízené prvky elementu HTML zobrazí jako ploché nebo umístěné ve 3D prostoru. V níže uvedeném kódu kódu transform-style: preserve-3d; pravidlo dává 3D hlasitost našemu tlačítku, zatímco transformace: rotatexX () vlastnost otáčí kolem osy x.

 .flipBtn transform-style: preserve-3d; transformace: rotateX (-120deg);

Všimněte si, že jsem použil -120deg Pouze pro demonstrační účely, protože tímto způsobem je snazší ilustrovat, jak funguje rotace tlačítka.

Nicméně v dalším kroku to změníme na -180deg aby se tlačítko zcela otočilo.

5. Animace tlačítka

V tomto okamžiku naše 3D tlačítko stále není animováno. Můžeme to udělat pomocí přechod vlastnictví. Používáme přeměnit vlastnost pro první hodnotu, protože toto je vlastnost, pro kterou chceme použít přechodový efekt. Druhou hodnotou je doba trvání, 2s.

Udělejme, aby se tlačítko otočilo pouze na vznášedle, takže místo .flipBtn použijte volič .flipBtnWrapper: hover .flipBtn. Jak již bylo zmíněno, změňte také hodnotu rotateX () na -180deg aby se tlačítko otočilo.

 .flipBtn transition: transform 2s; transform-style: preserve-3d;  .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);

Všimněte si, že v repo Github I ke každému tlačítku přidali zaškrtávací políčko aby se animace vypálila :kontrolovány spíše než na :vznášet se, tímto způsobem se chová spíše jako skutečné tlačítko. Zahrnula jsem také čtyři různá tlačítka se čtyřmi flipovými směry (Top → Bottom, Bottom → Top, Right → Left → Left → Right), takže můžete snadno použít libovolný obsah..

Zobrazit ukázku
Stáhněte si zdroj