Cum de a face un efect de animație flipping folosind css

animație CSS - acest lucru este un lucruri foarte util si distractiv. Cu câteva reguli simple, nu poți face lucrurile obișnuite și elegant, care va atrage utilizatorii să animație său atractiv.

Astăzi vom învăța cum să facă una dintre cele mai interesante efecte de animație folosind CSS, și anume efectul de basculare atunci când treceți peste imagine, dar este numit efect Răsturnarea.

HTML markup

Din moment ce unitatea noastră cu o imagine va fi cele două părți, fac marcajul propriu-zis:

Avem două clase de «față», care este responsabil pentru partea din față a unității, care este implicit, cu alte cuvinte - este imaginea. Iar clasa «înapoi», care este responsabil pentru cartografierea interior, care apare cu o animație frumos atunci când treceți peste el.

Pun pariu că nu se putea aștepta ca regulile CSS va fi atat de putin :) Asta toate regulile CSS:

Pornirea pe verticală

În mod implicit, unitatea este oglindită pe orizontală, dar cu siguranță se poate face, asa ca el a trecut de-a lungul și de un plan vertical, trebuie să adăugați reguli CSS câteva și totul:

Suport pentru Internet Explorer

Cu browser-ul Internet Explorer altă poveste cu totul, după cum este necesar să se modifice aproape toate regulile, deoarece până în prezent multe dintre ele nu sunt susținute, din păcate:

Asta e tot, oameni buni. La foarte puțin efort am făcut astăzi cu tine efect destul de complex și frumos, folosind animație CSS. Desigur, acesta este un exemplu foarte simplu, puteți modifica sau schimba pentru a se potrivi nevoilor dumneavoastră.

Asta e tot pentru moment.