Bonjour,
Comme je suis un peu juste en 3D je me suis amusé à produire des Flips Cards en m'inspirant de ce que j'ai pu trouver sur CodePen *** : ma solution.
Mon attention porte ici sur l'animation. L'animation actuelle me convient : on clique sur une carte, elle se retourne, on reclique dessus, elle revient à son point initial par le chemin emprunté plus tôt. Mais je voulais tester d'autres solutions en allant un peu plus avant.
Voici donc ma question : comment faire en sorte pour que la carte tourne toujours dans le même sens AVEC UNE TRANSITION (avec une animation il faudrait sans doute s'appuyer sur animation-fill-mode: forwards;) ? Je ne suis pas sûr que cela soit possible, je demande au cas où...
___
*** Les Pens ne sont pas toujours terribles au passage : les devs ont tendances à coder leur dimensions en dur. De plus le verso des cartes (back) est pratiquement toujours codé en position:absolute + inset:0, ce qui fait que la carte au verso dépend du contenu de celle du recto, et jamais l'inverse. De mon côté je le fais en responsive avec grid qui résout très bien ce problème.
Edit : modification du titre du topic.
Modifié par Olivier C (17 May 2024 - 20:59)
Comme je suis un peu juste en 3D je me suis amusé à produire des Flips Cards en m'inspirant de ce que j'ai pu trouver sur CodePen *** : ma solution.
Mon attention porte ici sur l'animation. L'animation actuelle me convient : on clique sur une carte, elle se retourne, on reclique dessus, elle revient à son point initial par le chemin emprunté plus tôt. Mais je voulais tester d'autres solutions en allant un peu plus avant.
Voici donc ma question : comment faire en sorte pour que la carte tourne toujours dans le même sens AVEC UNE TRANSITION (avec une animation il faudrait sans doute s'appuyer sur animation-fill-mode: forwards;) ? Je ne suis pas sûr que cela soit possible, je demande au cas où...
___
*** Les Pens ne sont pas toujours terribles au passage : les devs ont tendances à coder leur dimensions en dur. De plus le verso des cartes (back) est pratiquement toujours codé en position:absolute + inset:0, ce qui fait que la carte au verso dépend du contenu de celle du recto, et jamais l'inverse. De mon côté je le fais en responsive avec grid qui résout très bien ce problème.
Edit : modification du titre du topic.
Modifié par Olivier C (17 May 2024 - 20:59)