Készítsen animációk puccs css
Gyors megjegyzés: ez nem az első tankönyv a hasonló hatású, de mindenki másnak tűnt nekem túl bonyolult. Sok más cikkeket hozzá több stílus kód példák, akkor szükségessé az olvasó megfejteni melyik közülük szükség, és mi nem. Ebben a leírásban, ezt a kérdést esik, így csak a szükséges stílusokat; Tudod díszítjük mindkét oldalán minden körben, ahogy szeretné.

HTML5 és CSS3 gyakorlatban nulla az eredmény!
HTML struktúra a kétoldalú hatás akkor várható:
Szeretnék fogadni, hogy az eladó változata a hagyományos felfújható az előhívó meg fog lepődni, milyen kevés CSS-t használnak:
Itt van egy gyors áttekintést a folyamat:
A külső tartály határozza meg a kifejezés egész területén animáció
Tény, hogy a belső edényt megfordítják forgatásával 180 fokkal során az egeret a szülő tartályba. Itt is ellenőrzik a sebességet az átmenet. Visszaírása -180 fok invertálja az elemek az ellenkező irányba.
Az elülső és hátsó tagok vannak elhelyezve, teljesen, ezért lehet „átfedés” egymással egy pozícióban; a hátoldali láthatóságot rejtett, ezért a hátránya fordult elemek az animáció nem jelenik meg
A személyes elem z-index magasabb, mint a visszatérés, így kódolni az első elem az első, és még mindig úgy tűnik, a tetején
Fordított tagja 180 fokkal elforgatja, hogy az egy második oldala.
Itt általában, és minden! Tedd ezt az egyszerű szerkezet a kívánt helyre és hozzá stílusok minden oldalról, hogy a szeretet!
Switch CSS puccs
CSS Függőleges puccs
Végezze el a függőleges puccs kicsit nehezebb - meg kell változtatni a tengelye körül. A forráskód meg kell változtatni, és a kártya lesz forgatva az ellenkező irányba:
Azt tapasztalja, hogy az idegenség - szükség van pontos meghatározása transzformáció alapján pixel 50% helyett.
A puccs mindig klasszikus tipikus példája, hogy mit lehet tenni a CSS-animációk, és kisebb mértékben - a 3D CSS-animáció. A legjobb dolog az, hogy az érintett valóban nagyon kevés CSS. Ez a hatás nagyon jól illeszkedik a HTML5 játékok, és ez ideális, mint egy „kártya” hatást. Mi másért lenne már felajánlotta, hogy használni?
Felülvizsgálat: Team webformyself.

HTML5 és CSS3 gyakorlatban nulla az eredmény!
A legtöbb IT hírek és webfejlesztés A csatorna-távirat