CSS Flip Card Effect
HTML-код
- Опубликовано: 7 сен 2024
- Create a flip card using just HTML and CSS3. The process requires just 5 essential blocks of CSS code. Flip cards are great space-savers for website content, and can greatly boost online user experiences. The code snippet for this tutorial is in the comments.
Here is the code snippet for this tutorial on CSS flip cards. Feel free to customise the code and content for your projects.
CSS Card Flip
body{
background: #3C5377;
}
/* THE MAINCONTAINER HOLDS EVERYTHING */
.maincontainer{
position: absolute;
width: 250px;
height: 320px;
background: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* THE CARD HOLDS THE FRONT AND BACK FACES */
.thecard{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
transform-style: preserve-3d;
transition: all 0.8s ease;
}
/* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */
.thecard:hover{
transform: rotateY(180deg);
}
/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */
.thefront{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
overflow: hidden;
background: #ffc728;
color: #000;
}
/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */
.theback{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
overflow: hidden;
background: #fafafa;
color: #333;
text-align: center;
transform: rotateY(180deg);
}
/*This block (starts here) is merely styling for the flip card, and is NOT an essential part of the flip code */
.thefront h1, .theback h1{
font-family: 'zilla slab', sans-serif;
padding: 30px;
font-weight: bold;
font-size: 24px;
text-align: center;
}
.thefront p, .theback p{
font-family: 'zilla slab', sans-serif;
padding: 30px;
font-weight: normal;
font-size: 12px;
text-align: center;
}
/*This block (ends here) is merely styling for the flip card, and is NOT an essential part of the flip code */
Front of CardThis is the front of the card. It contains important information. Please see overleaf for more details.
Back of CardYour use of this site is subject to the terms and conditions governing this and all transactions.
Submit
how to make it responsive?
Awesome effect but when I hover my text gets reverse... Even if I copy your code here, plz help me understand why and how I can fix it
Thanku for giving this code i like it.... G@@d
Bonjour c'est pas possible de nous faire la vidéo en francais s'il vous plait merci
thank you
WTF. In 6 minutes everything explained. And then the sandwich example. Wow respect. Perfect explained.
This tutorial is gold. Not only it shows you how to achieve the desired effect in a straight to the point way, but it then takes the time to explain how everything works and why! Thank you for making this
Thanks very much for your comments; made my day!
I just got it and I hope I can make you guys get this as well.
So the key is the backface-visibility, the transform for the back, and the pseudoclass. Basically, what he is doing is he is creating two faces and having them be invisible when either one is on their back.
By having theback be flipped at the beginning, the front is visible and the back is not (which is why we don't need to worry about z-index!) So, every time the hover psuedoclass is called (basically means that when you hover over a class, something will happen), one of the cards will be flipped invisible and the other one will be flipped visible!
Awesome video. Just remember for Safari to also include: -webkit-backface-visibility: hidden;
yes that fallback should’ve been included. Thanks for sharing mate :)
You are my hero dude. Thank you. Almost get crazy :D
Hello Dear,
Your coding skills and experience are great. Welcome, Viewers Arjun Khara is doing a difficult thing in a easy way. Thanks, Thank, Thanks a lot Arjun Khara 🤩🤩
"...and CSS you next time" i just had to give you a like for that alone
I am watching this video in 2021 but i have never watched a video of explanation like that great job
Finally! An easy-to-understand tutorial that gets straight to the point and it works
Thank you, Arjun. I have struggled to get this great feature to work for days... until I found your channel. Now I have a prettier website. Have a great day!
Hi Alex - You’re very welcome. I’m glad the tutorial helped and thanks very much for your amazing comment. Absolutely made my day :D cheers
that's called the way of explaining things perfectly, Respect you to provide the quality content
Tried to make it work with other videos too but yours is the only video that actually helped me!!! Thank you !!
Hi Julia, glad it worked for you! Please let me know if you have any questions. Cheers!
I'm 5 years late but this is really good tutorial! thank you
Clear, simple and all that is possible because of your awesome step by step explanation thank you for this tutorial and the hard work you put into editing this video for your viewers.
Thank you for your very kind words; made my day :D. Glad you found the tutorial useful!
@@ArjunKhara Yes thank you very much, your tutorial was very helpfu🤓l, I wish you further success; and more subscribers in the near future, and with the way you handle things I believe that it is possible. 😀
@@ArjunKhara Yes thank you very much, your tutorial was very helpfu🤓l, I wish you further success; and more subscribers in the near future, and with the way you handle things I believe that it is possible. 😀
@@steevoni1 Thank you so much! :)))
This can't be more easier than this great explanation sir thank you helps a lot ♥️
The best explanation I found.
I have only admiration for your work, the way you explain and the way you show all posibilities of which would and wouldn't work, you are amazing and help loads building up own logic ! I wish you would have invested more time into this.
Thank you very much for your kind comments. Made my day! I'll be putting up more videos soon now that my course of study is over. Cheers!
Very very impressive. minimum css used. Its so useful.
Had been banging my head onto every YT tutorial to create a flip card.... And this is the Best and Easiest so far .... LiferSaver ..... Thanks Man for this .... Keep Going!!!
I finally understood this flipping card code! thank you
You're very welcome!
Too much information in 6 mins .. clear and too the point....✨
you are such a good tutor, you are talented
Haha thanks very much! This totally made my day :)
great tutorial, after looking at lots of different resources I still felt a bit stumped, but after watching this video I understand how to get the desired flip effect, and also understand how I could create other unique 3d effects using this process
Thank you for the explanations. Really makes the tutorial easy to understand and follow.
great tutorial. really loved the sandwich example, it cleared the one doubt i had. Make more videos, please
Great video! Also you can add the perspective property to make it look even more real, if someone likes:
.maincontainer: { perspective: 1000px ... rest of the code ...}
As the name of the property says, it gives perspective to the element
Gonzalo Rodriguez - excellent suggestion. I’ll mention this comment in the next related video. Thanks mate :)
thanks
perspective or perspective origin? or both
Very clear and straightforward regards
This is a fantastic tutorial. After watching several tuts of flipping cards your explanation put it all together for me. I really appreciate it!
Thanks for your very nice comment :) glad you found the tutorial useful.
Were were you the whole time you are explaining beautifully hope i should found you earlier
Keep uploading such amazing content
Thanks for the video. Great help.
Brilliant video! and thank you for taking your time to really explain step by step what each code means!
Thanks very much - this is such a nice comment :)
This is my wish for an instructive css tutorial come true!! thank you!!
U help me alot i am worried since last few days also watch some other video also but your code is like small and powerfull thank you so so much sir
Great Tutorial, it helped so much...
Thank you sir for explaining this is very easy way..❤❤❤❤
Thank you so much, your explanation about the css flip card was perfect!
I know this is an older video - but thank you - this was a wonderful explanation
Best card flip video I've ever seen!
Thank you for your very kind comment. Made my day :)
And this video saved my day ;)
Thank you for that great lesson!!! I tried the code and it worked. Before your tutorial I tried to learn the CSS 3D flip card effect with Treehouse. Their lessons were completely useless. I couldn't understand anything.
Your lesson was top notch! Once again thank you!!!!!
I dont know if it is explained in coments BUT if you hover over you get flickering, problem is the card is flipping so it breaks hover state, to fix you must fix hover state so its like this:
from:
thecard:hover {transform: rotateY(180deg);}
to:
.maincontainer:hover > thecard{transform: rotateY(180deg);}
Cheers Ivan, that's a great fix. Thanks for the solution :)
You're the best, thank you !
Thanks very much! :)
You are a amazing tutor. Please do upload more videos like these.
Janet, Singapore
perfect explanation, an informative video. Thank you for explaining everything step by step
Just subbed because your explanation was so on point! Thanks for not wasting time with fluff and explaining everything with great examples :)
Thank you for your kind words. Made my day! Glad you liked the tutorial :)
amazing explanation. 👏👏
Thanks :)
wow! great explanation! you also explained the 'why's' keep it up !
Thanks, your code really works , now i will do by myself, creating contents for English clases as a seconde Language, and other games,
No worries, glad you found it useful. Please let me know if you have any further questions :) Cheers!
@@ArjunKhara oh, thanks, yes, i have another question,..I'd like to create about 5 or more cards in one page, what i must do?
@@karincentenaro356 That would be similar to the demo in the video. An easy way would be to create a div with either flex or grid as the display; this div would be a container. Then, within this container div create five internal divs, one to hold each of the cards. Finally, in each of these five internal divs simply copy-paste the entire flip card code. Give it a shot a see how it goes. Cheers!
It is working.....very good explanation & coding.
Everything explained, understable. Great video!
Finally you made me understand this flip card effect.... Thanks ☺
No worries, glad it helped :)
Oh man! This is amazingly simple! Thank you so much
No worries, glad you found it useful :)
this is what I need...
thanks for your clear and concise explanation :)
This was was professionally simplified for me... Much thanks
You're very welcome :)
I was just searching for a ready made flash card and went to this haha
Great tutorial Arjun, thank you for sharing!
An amazing lesson, thank you! you have a new subscriber.
If you would like to achieve the same flip effect using a click or tap, you can use simple Javascript. Here is the same code snippet for the full tutorial, with the Javascript code appended at the end of this code snippet. Enjoy!
CSS Card Flip
body{
background: #3C5377;
}
/* THE MAINCONTAINER HOLDS EVERYTHING */
.maincontainer{
position: absolute;
width: 250px;
height: 320px;
background: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* THE CARD HOLDS THE FRONT AND BACK FACES */
#thecard{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
transform-style: preserve-3d;
transition: all 0.8s ease;
}
/* THIS USED TO BE THE PSUEDO CLASS CONTROLS THAT FLIP ON MOUSEOVER AND MOUSEOUT IN CSS */
/* BUT NOW THIS CLASS IS BEING CALLED IN JAVASCRIPT WHEN THE CARD IS CLICKED */
.flipper{
transform: rotateY(180deg);
}
/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */
.thefront{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
overflow: hidden;
background: #ffc728;
color: #000;
}
/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */
.theback{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
overflow: hidden;
background: #fafafa;
color: #333;
text-align: center;
transform: rotateY(180deg);
}
/*This block (starts here) is merely styling for the flip card, and is NOT an essential part of the flip code */
.thefront h1, .theback h1{
font-family: 'zilla slab', sans-serif;
padding: 30px;
font-weight: bold;
font-size: 24px;
text-align: center;
}
.thefront p, .theback p{
font-family: 'zilla slab', sans-serif;
padding: 30px;
font-weight: normal;
font-size: 12px;
text-align: center;
}
/*This block (ends here) is merely styling for the flip card, and is NOT an essential part of the flip code */
Front of CardThis is the front of the card. It contains important information. Please see overleaf for more details.
Back of CardYour use of this site is subject to the terms and conditions governing this and all transactions.
Submit
function myFlipFunction() {
var myElement = document.getElementById("thecard");
myElement.classList.toggle("flipper");
}
Thank you! Really good tutorial. Easy to follow and good explanation!
Sir, nice explanation with amazing tutorial !!
Thank you! Your tutorial is really clear and helpful!
Just Awesome. this video help me to solve my problem. thanks for this one.
very good simple explanation!
This was lovely and thoroughly explained. :)
Really well explained, thanks so much 😊😊😊😊
It was simple and easy tutorial thank u for making such a fun to learn video.
This is amazing and can get that card at center..
you have a style , great video
Thanks friend. Interesting!
Excellent way of explaination. Love from Pakistan : )
Thank you for that great lesson
Good job man, keep up the clear explanations!
Very good this explanation. Best Regards
Great tutorial, you're awesome!
Really thanks alot. Indians are really great at coding. Found it useful even after 2 years. Just required one help what to do I require to create multiple flash card one after other vertically aligned on same page of html. Please reply.
thankyou for this tutorial, it's save my day ~~
Thank you great tutorial
I found many ways to but this is crazy
This was amazing! Thank you very much man! :)
Briliant tutorial and well explained :)
WOw I love your style
Couldn't stop me liking this video ❤
haha cheers :)
@@ArjunKhara ❤
man i was stuck on this thanks you helped
Thank you Sir.Amazing Work💯.Im learning a lot from you🙏
Great video thanks!
Perfect. This is what i wanted :) Thank you soo much
Awesome explanation....
good ! the best ive found in youtube
Great explenation, thank you so much!
Thank you soo much is very helpful and good explained 🥰🥰
Thanks very much! Glad you found it useful :)
keep up the good work dude.
thanks for this tuto i suscribed!
Very useful, thank you very much, Sir!
Absolutely incredible stuff... Can't thank you enough for this amazingly well-done tutorial! By the way, what music did you use?
Thanks for your kind words :) glad it helped. The music is from RUclips's creator library. Track 1 is Pas De Deux, and Track 2 is End of Summer.
@@ArjunKhara Wow that was quick; thank you again señor!
WOW HAT OFF you explain so nicely thank you so much
Please make a video on slice box
Very nice
Thank you so much
Superb. Love it .Thanks
Thanks bro
Well explained
Thanks very much! :)