Pour coder une flip card en CSS, c’est ici. Mais qu’est ce qu’est la « flip card », c’est une card virtuelle sur une page web présentant des informations succinctes avec le plus souvent des animations. Le but est de pouvoir aider à la décision du choix de lecture. L’effet « flip » est le fait d’avoir la card qui se retourne afin de voir le verso et les informations qui sont affichés dessus.
C’est le principe de la carte à jouer que l’on retourne recto-verso et que l’on voit ce qu’il y a sur les différentes faces. L’avantage de coder une flip card en CSS, c’est que vous pouvez personnaliser à l’infini. Comme il existe des centaines de propriétés CSS, il est tout à fait possible de faire une carte unique en son genre, juste pour vos besoins.
Coder une flip card devient donc un jeu vu l’étendue des possibilités que vous avez. Ainsi s’ouvre devant vous un nouvel univers d’animations, de mise en avant de l’information.
Comme pour les autres cards, commencer par définir votre fichier HTML avec les divs qui auront des classes. Pensez à définir la même taille pour votre image que pour votre conteneur principal.
Sur le CSS, on le conçoit en 3 étapes. Ainsi la première nous permet de définir les limites et les propriétés des blocs. Ensuite la seconde concerne la face avant. Pour finir, on dédie la dernière à la face arrière.
La rotation se fait encore avec la propriété « transform » mais cette fois-ci, on utilise l’attribut « rotate » sur un axe Y. On cache la face qui n’est pas sur le devant avec la propriété « backface-visibility ». Puis on supprime les effets de liens pour un plus joli effet.
Comme à chaque fois, libre à vous après de personnaliser et d’agrémenter le CSS selon vos envies.
