Awesome Card Flip Animation using CSS & JavaScript - Easy tutorial

Awesome Card Flip Animation using CSS & JavaScript - Easy tutorial

Tyler Potts

3 года назад

70,320 Просмотров

Ссылки и html тэги не поддерживаются


Комментарии:

Bedtime Horror Story
Bedtime Horror Story - 10.10.2023 18:51

Freaking great! Crystal clear! Thank you !!

Ответить
Sely
Sely - 01.09.2023 01:32

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.

Ответить
Gabriel lk
Gabriel lk - 25.07.2023 20:15

Thanks a lot!

Ответить
MD AMAN SARKAR
MD AMAN SARKAR - 15.06.2023 09:44

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

Ответить
Zepherscotty
Zepherscotty - 10.06.2023 17:52

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.

Ответить
doublevizzion
doublevizzion - 01.03.2023 22:18

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

Ответить
Halyna Shevchyk
Halyna Shevchyk - 07.02.2023 12:29

special thanks for github😍

Ответить
Andrea Rivera
Andrea Rivera - 11.01.2023 06:09

Thanks, this was very helpfull ♥

Ответить
MR
MR - 26.12.2022 16:36

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

Ответить
Parker Thomson
Parker Thomson - 07.12.2022 03:21

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

Ответить
Ricardo Romero
Ricardo Romero - 31.10.2022 20:43

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

Ответить
oğuz özdemir
oğuz özdemir - 25.10.2022 15:46

Good job Tyler. I would also suggest adding...

body { overflow: hidden; }

.card { margin-top:50px; }

Also thank you...

Ответить
sam joseph
sam joseph - 12.10.2022 15:49

Great video!

Ответить
Eduardo Schilling
Eduardo Schilling - 17.09.2022 01:39

😍🤗

Ответить
janina
janina - 13.09.2022 14:59

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

Ответить
MaeFaeMusic
MaeFaeMusic - 05.09.2022 20:31

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

Ответить
Limpme Brasil
Limpme Brasil - 31.08.2022 05:40

Hey great video, thank you!

Would it be possible to flip the card clicking a button instead of tapping the card?

Ответить
Esteban Pedro Guerra Vidal
Esteban Pedro Guerra Vidal - 09.08.2022 16:19

I love it. Thanks 👌

Ответить
RICARDO REALES
RICARDO REALES - 05.08.2022 20:18

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

Ответить
Wet Knee Houston
Wet Knee Houston - 12.07.2022 22:29

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

Ответить