Flipping Card Animation Using HTML and CSS

In this video, let's create a simple flipping card animation using HTML and CSS. The most important properties that adds the final effect is 'backface-visibility' and 'transform-style'.
Get the code here: codepen.io/rya...
Find me here:
Twitter: / ryanwebtech1
Instagram: / ryanwebtech1
Codepen: codepen.io/rya...

[@roba9443]

Works great. For Chrome 83, add "backface-visibility: hidden;" to the parent ".front,.back" rule as well.

[@AlexGb007]

Thank you for this very helpful advice. Solved that weird „glitch“ for me while flipping the card.

[@AngaarUriakhil]

Clearest video on the topic - thanks!

[@RyanWebTech1]

Thank you. Glad you found the video helpful.

[@danyquintero3895]

Thank you so much Dharm, you explain much better than my professor, hugs from Colombia 🇨🇴🔥

[@all-eter-4289]

very clear thanks you!

[@ayeshababar8383]

Thank you so much Sir! I needed to make this for an assignment, and it works great!

[@apan0608]

Very good tutorial, adding the position: relative and transform-style to parent has solved the issues I have been scratching my head with!

[@RyanWebTech1]

Thanks. Glad you found the video helpful.

[@dharmbharodiya5158]

This really helped! The way you explain everything is just amazing.

[@HabunoGD1821]

Good Job! Perfect...

[@prasadsawant22]

I loved your presentation ❤️👍

[@SvetaSveta-ms4hi]

Thanks a billion! ❤️

[@seeker3794]

Thank you very much.

[@theWorldIsMultivariate]

Thank you so much!!

[@messi_codes]

thanks for wonderful video bro

[@Mostafa-ke7hj]

thanks very helpful

[@kanna6835]

Thank you... for your clear explanation :)

[@onthegocode1443]

Great tutorial, learned a ton of stuff!!!

[@feedgaming8374]

thank u so much

[@zakariyaabaouali6904]

thanks bro you help me a lot ❤❤

[@CodingLover1]

Thanks a lot awesome .

[@NamelessG0D]

Thanks, very helpful.

[@memo_force]

nice 👍

[@mohamedyoussef8835]

Awesome video ++++++++++++++++++ 🙂

[@cawai2815]

Thanks, it would be very useful.

[@rodmejiao7340]

Amazing bro!

[@achimovicidamir2119]

thanks

[@bretts7740]

very helpful!

[@RajeshThakur-nm3fr]

Hello I am not able to give padding inside card. padding is coming out of the card. Please try to explain me asap.

[@morgan1827]

if i have 9 card frond and back, how i flip this ?

[@stefanpfadt4353]

Hey cool ☺ Any chance to start the flip when you toggle a switch? (e.g. monthly to yearly)

[@RyanWebTech1]

That's a cool idea. The toggle switch can be implemented using the "checkbox" hack or a few lines of JavaScript.

[@stefanpfadt4353]

@@RyanWebTech1 Do you know any good websites where I could find out more about this sort of Javascrip issue? I am not a coder and its quite difficult for me to find the right/good sources ;)

[@bipinsanghvi7834]

Instead of card, how can I use any picture for the same front n back type flip card effect.

[@hashirmalik9055]

add that picture in div with front and back classes

[@Siddh_Galactica]

You copied it from yahoo baba