Pentru a obține acest efect de rotire orizontală (tip „flip card”), trebuie să modificăm puțin structura HTML și să adăugăm câteva reguli CSS pentru animație. Practic, fiecare cadran va avea o „față” (cu imaginea) și un „spate” (cu link-ul sau un text suplimentar).
Iată codul actualizat pentru un efect elegant și interactiv:
„`html
Management
Vezi detalii despre organizare
Erasmus
Proiecte europene și mobilități
Școala Altfel
Activități educative non-formale
„`
### Detalii despre efect:
1. **`rotateY(180deg)`**: Aceasta este comanda care face rotirea pe orizontală (în jurul axei verticale).
2. **`backface-visibility: hidden`**: Esențial pentru ca spatele să nu se vadă prin față și invers în timpul rotirii.
3. **Interactivitate**: Când mentonatul tău pune mouse-ul peste cadran, acesta se învârte și îi oferă butonul de acces, făcând navigarea mult mai modernă.
Poți adăuga oricâte astfel de carduri (`flip-card`) în interiorul containerului principal și se vor așeza singure pe rânduri. Arată așa cum îți doreai?