Is there a way to create flippable cards on button click then when you swipe the card it shows the front of the card

Question

If a card has been flipped and you swipe card I want the card to flip and show the front of the card and if the card was not flipped to show the front of the card after swipe

Answer 1

Yes, there's way to do that...

... but swipe feature is not really obvious to implement ^^

Anyway, to do so, you will need to study css 3d transforms (for card flip) and touch events (for swipe)...

Answer 2

You could check this code to see how I've implemented swipe gesture handling, and use case of 3d transforms (not card flip, but the principle):

https://code.sololearn.com/WV5yE2En8S84/?ref=app

However, that doesn't means you can avoid study both topics I suggest in my previous post ;P

Answer 3

you cannot "inbox" me, but you could post a question (once at a time per specific problem, avoiding posting too general question, with relevant and accurate informations and link to the code where you're stuck) and notice me (in a post, doesn't know if it's possible in a question) with the "@" feature (type this char in an answer, wait few seconds a menu would open to select user to notice -- like this: Nigel Bongani Zulu -- you could even type first char(s) of targeted username to filter the choice menu) or contact me by posting comment on one of my public code (preferabily one more than less related with your question ;))

Answer 4

OK thank you let me research on it. Are you familiar with touch events and can I inbox you if I need any help

Answer 5

Thank you. I've checked the principle. It's exactly what I want

Answer 6

check these useful ressources:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms#3D_specific_CSS_properties

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events

... and don't hesitate to search others on internet ;)