Awesome Card Flip Animation using CSS & JavaScript - Easy tutorial

[@roshdyessam3480]

I really laughed when I found we got the same theme, cool video btw

[@wanishoaib_]

i stumbled on this video and i have to subscribe

[@GitGudGoblin]

You deserve millions of subs. I accidently found this channel but the content is golden so I'm staying :) Thanks and keep up the good work. Superb content and presenting format.

[@TylerPotts]

Wow, thanks!

[@petipois28]

I used this as a base to make an ionic vue simple card game. Thank you

[@TylerPotts]

Excellent!

[@lucasdahl1118]

OutStanding!

[@TylerPotts]

Thank you

[@qwarlockz8017]

This was a really great vid. It was clear and easy to follow and sort of set a lot of things in place. Thanks for the help and great work!

[@aloobre]

More of this, really like these easy tutorials..so good for inspiration

[@TylerPotts]

Thank you! Will do!

[@abdullahboston6963]

You probably dont give a shit but if you guys are stoned like me during the covid times you can stream all the latest movies and series on instaflixxer. Been streaming with my brother for the last months =)

[@franciscohen1299]

@Abdullah Boston Definitely, have been watching on InstaFlixxer for since november myself :)

[@prathamgenius]

Awesome buddy!!!! I used it for my Ecommerce Website.....Loved this.....Well explained

[@kajberg9111]

looked on alot of these videos and liked this the most. Thanks man for a really good tutorial.

[@TylerPotts]

Glad you liked it!

[@ДаниелДианов]

Great video! That was exactly what I was looking for. Thanks!

[@TylerPotts]

Glad it was helpful!

[@iselaregain9301]

Tyler, this tutorial is so awesome. You are awesome!!!

[@TylerPotts]

Glad you think so!

[@d.ashley879]

Did anyone else get overlapping text on the card when you used "Lorem" or any other longer text in the tag?

[@santiagoramirez5507]

Thank you so much!! Using this technic I'm gonna make prettier websites! Greetings from Chile!!

[@TylerPotts]

Awesome!!! :D

[@nestorfontalvo1061]

Javascript doesn't stop to amaze me

[@TylerPotts]

It's awesome!

[@bedtimehorrorstoryyoutube]

Freaking great! Crystal clear! Thank you !!

[@bepd]

Loved this

[@TylerPotts]

Awesome! :D

[@boneykingofsomewhere]

Just found your videos and I love them! your videos are short-ish and well explained, these are good things. 12 hour react course is just a bit much from others lol

[@mcm4981]

Great vid, I do appreciate. Just what I needed to see...

[@TylerPotts]

Glad it helped

[@Sol-ty5nx]

I love it! thank you. Greetings from Argentina

[@TylerPotts]

Thank you for watching! Hello in Argentina!

[@manohisoa]

Thanks a lot for this video! It was really helpful. Very simple and straightforward.

[@hvariawa]

Brilliant tutorial

[@TylerPotts]

Thanks!

[@malamhari_]

Thanks for this, learn so much

[@TylerPotts]

Glad it was helpful!

[@andrearivera7065]

Thanks, this was very helpfull ♥

[@linhbebu912]

A very good tutorial, everything is very clear. Thanks a lot!!!

[@TylerPotts]

Glad it helped!

[@Amilcar69]

i love u, thx!!! i need this

[@estebanpedroguerravidal8336]

I love it. Thanks 👌

[@Dxazcat]

Nice video, everything works! Thanks a lot ;)

[@TylerPotts]

You're welcome!

[@maefaemusic]

Great vid! Thank you so much. This is perfect for the project I'm working on

[@samjoseph5718]

Great video!

[@duck_it]

I want more............ Thank you so much.

[@TylerPotts]

Working on it!! :D

[@yevgenia7785]

Thank you so much!

[@TylerPotts]

You're welcome!

[@ezebado]

Wow! Amazing video Tyler ! Thank you so much for sharing. Is it another video explaining how is the process if I want to create more flashcards ? Like 100 for example. I would like to create flashcards to study. Thank you in advance. !

[@TylerPotts]

Hey E.B, a lot of people have asked for this so I'm going to create another video explaining how you can create multiple flip cards on a single page!

[@ezebado]

@@TylerPotts That's will be great Tyler! Thank you so much :)

[@palashxm]

Wow 👍

[@TylerPotts]

🤗

[@kaderlakhdar5735]

Lovely tutorial , keep on the hard work, it would be nicer to have your server window open on the side , this helps understand better the process and notice changes at ones it happens 👏👏

[@TylerPotts]

Thanks, will do!

[@ricardoreales7316]

excellent code... very useful... thank you very much

[@MDAMANSARKAR-c5x]

Thanks a lot, brother but can you please let me know How I can add multiple cards on a single page.

[@limpmeacademy]

Hey great video, thank you! Would it be possible to flip the card clicking a button instead of tapping the card?

[@Michael-yb1bm]

Hey! Sorry for asking, but i have a short question. How do i change the js, so that multiple cards would work?

[@TylerPotts]

It's hard to explain over text but you need to use a querySelectorAll and loop through each one then apply the events

[@Michael-yb1bm]

@@TylerPotts yeah so thanks for answering so fast. I know, that I have to use querySelctorAll and I already tried it but somehow my code doesn't work. And btw. great tutorial My code: let card = document.querySelectorAll(".card__inner"); card.forEach((link) => { card.addEventListener('click', function(e) { this.classList.toggle('is-flipped'); }); });

[@TylerPotts]

Instead of card.addevent try link.addevent your still referencing the list of cards instead of the individual one!

[@Michael-yb1bm]

​@@TylerPotts Oh finally it works! I literally can't say thank you enough

[@vitoriaaguiar3379]

Hi, if u replace the js code for this one, it will work ´´const card = document.querySelectorAll(".card__inner"); function flipCard() { this.classList.toggle('is-flipped'); } card.forEach((card) => card.addEventListener("click", flipCard));´´

[@janina1240]

Hey, how would I make this work for more than one card?

[@TylerPotts]

Instead of selecting one card you'd need to select multiple with something like "querySelectorAll" then loop through and apply the same code - I hope that helps.

[@tamaskosa3283]

Easy and effective! I used it for my interview work! Thanks a lot!

[@TylerPotts]

Glad it helped!

[@tamaskosa3283]

@@TylerPotts The markup & css is simple enough to easily understand the mechanics behind it. However I still don't know how the css "knows" which html elements to use for card front and back sides. Is it because you set "transform-style:preserve-3d;" on an HTML element which MUST have exactly 2 children of which the first will be displayed on default and the second after the transformation? The mechanic goes hidden behind the scenes and I'd like to understand what's happening. Thanks again! 🙂

[@stefanpfadt4353]

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

[@vitoriaaguiar3379]

How can I put multiple cards in row? Next to each other?

[@TylerPotts]

You need to select all elements and not just thebone

[@zepherscotty]

This is fantastic, but how come I can't copy it & make more than one? When I try to make a second card & either try to add a ".card__inner2" for example to the Javascript, It doesn't work, or if I copy & make a completely new JavaScript code & add ".card__inner2" to it's own version of the Javacode, it makes both cards stop working. I know this is 3 years old but I would love to know why.

[@dowelg1071]

is there a way to make the container thicker on the side view when flipped?

[@shubkale376]

12:37 line.76 can you please elaborate more on the " .card__header::after "

[@TylerPotts]

What do you want me to explain?

[@HosseinPi921]

plz tell a tutorial about html and css to learn from basic tnx

[@eugeneskrypnyk7396]

On the site, you need to turn over 8 different cards, but it works only on the very first one. Why?

[@TylerPotts]

That's because we only target 1 card using querySelector if you want to select multiple you need to use querySelectorAll then loop through the results and apply the event listeners

[@eugeneskrypnyk7396]

@@TylerPotts thx)

[@oguzozdemir8886]

Good job Tyler. I would also suggest adding... body { overflow: hidden; } .card { margin-top:50px; } Also thank you...

[@VincentBué]

i want to make 6 cards on the same page but just copy and paste the code does not work i tried some other things but none of them worked, how can i do ?

[@sanjaybalaji9367]

Could anyone explain me where is_flipped is declared as class in html., because he is calling it in css and also added it in JS. Please explain

[@TylerPotts]

It gets applied to the ".card__inner" div via javascript but is not declared in the HTML it is only set via JavaScript.

[@parkerthomson1447]

Would someone happen to know why the back of the card is in the correct color but the side with all the content is a light gray? This is from me trying to learn and follow along I dont see what I messed up

[@slendermann7610]

Hi, this tutorial was really helpful!! everything seems to work perfectly using chrome, but... using Safari instead, the property -webkit-backface-visibility: hidden; seems to work only on the front face of the card, while when the card is flipped i can see through the back face and i dont know how to fix that. is there any solution to this weird problem? :/

[@TylerPotts]

I'm unsure I'd have to take a further look. Sorry.

[@imanbenetlewis6365]

Is there a way to do this without the code? Like an app or a beginner friendly version?

[@TylerPotts]

Umm I only ever work with code so I don't know

[@doublevizzion]

I keep getting cannot read properties of null (reading 'addeventlistener')

[@paulmoldovan9518]

How to stop backface to rotate if there is a link?

[@IspittingFactzz]

Hey Paul, did you find the answer to this??

[@paulmoldovan9518]

@@IspittingFactzz no

[@TylerPotts]

Hey Paul, It's hard to explain over text but you need to check the click path to check what was clicked and if it was a link return / stop propagation... If you need further help feel free to join the discord I can help more there.

[@paulmoldovan9518]

@@TylerPotts Hey. Thanks. Yepp its allready made.

[@lucasdahl1118]

@@paulmoldovan9518 Did you get it to work?

[@SoraTheeExplorer]

i know its been two years but now i am here and i actually followed the whole video and fix some of my mistakes but i cannot seem to figure out why my p tag is taking a limited amount of text and whenever its exceed and number of lines it all crashes and scramble into each other , like its a total mess. Please help.

[@romannovak375]

hi thanks for the tutorial if I add another card it doesn't work it please help XD

[@TylerPotts]

You would need to change the document.querySelector to document.querySelectorAll and then loop through the results...

[@romannovak375]

const card = document.querySelectorAll(".card__inner"); function flipCard() { this.classList.toggle('is-flipped'); } card.forEach((card) => card.addEventListener("click", flipCard)); thx works XD

[@TylerPotts]

@@romannovak375 Woo happy you understood what you said! My comment wasn't very clear :)

[@JimmyDevAndGeek]

How can I do to place 2 or more cards?

[@TylerPotts]

I've been asked multiple times for this so I will probably create a revised video :)

[@vitoriaaguiar3379]

Hi, if u replace the js code for this one, it will work ´´const card = document.querySelectorAll(".card__inner"); function flipCard() { this.classList.toggle('is-flipped'); } card.forEach((card) => card.addEventListener("click", flipCard));´´

[@JimmyDevAndGeek]

@@vitoriaaguiar3379 Thanks.😁

@@vitoriaaguiar3379 I LOVE YOU YOU SAVED MY LIFE :')

[@thomassavino3813]

@@vitoriaaguiar3379 Thank you! Thank you! Thank you!

[@DllacyLimaJr]

Muito bom o vídeo parabéns

[@mikheilrukhadze8782]

its not working on me can u help? on call or something

[@alquran549]

how to change image in this code? please help meeeeeeeeeeeeeeeeeeeeeeeeee

[@sahajranipa]

can you please provide code files? I want to use them as for my reference bro.

[@TylerPotts]

The link is in the description ? :)

[@glendonphilippbaculio1811]

how can i rotate in 1 direction?

[@TylerPotts]

I'm not sure what you mean! If you need help feel free to join the discord and as there :)

[@factking2241]

nyc tutorial !, can u pls tell me how to flip the page from the other side, like it is getting flipped from the side at which it is written card front, but I want it to get flipped from the other side where it is written the information.... Please reply !, I want to know

[@abgthscode6326]

not wroking for multiple cards

[@elschilling]

😍🤗

[@Ricardoromero4444]

Would be nice if the tutorial showed only the flipping animation. We have to skip through the whole video just to get to the part we came to learn

[@ranjeet5806]

Advice: instead of focusing more on styling, try to explain more about the Crux, the flipping effect, and the backface and stuff.

[@TylerPotts]

Thanks for the feedback. I'll keep that in mind for future videos

[@gabriel_lk]

Thanks a lot!