CSS Flip Card Effect
Вставка
- Опубліковано 16 жов 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!
that's called the way of explaining things perfectly, Respect you to provide the quality content
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!
Finally! An easy-to-understand tutorial that gets straight to the point and it works
I am watching this video in 2021 but i have never watched a video of explanation like that great job
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
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
This can't be more easier than this great explanation sir thank you helps a lot ♥️
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 🤩🤩
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!
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!
"...and CSS you next time" i just had to give you a like for that alone
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! :)))
Thank you for the explanations. Really makes the tutorial easy to understand and follow.
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
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!!!
you are such a good tutor, you are talented
Haha thanks very much! This totally made my day :)
Thank you sir for explaining this is very easy way..❤❤❤❤
I finally understood this flipping card code! thank you
You're very welcome!
great tutorial. really loved the sandwich example, it cleared the one doubt i had. Make more videos, please
I'm 5 years late but this is really good tutorial! thank you
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.
Too much information in 6 mins .. clear and too the point....✨
This is my wish for an instructive css tutorial come true!! thank you!!
Very very impressive. minimum css used. Its so useful.
Great tutorial Arjun, thank you for sharing!
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 :)
Thank you so much, your explanation about the css flip card was perfect!
Very clear and straightforward regards
I know this is an older video - but thank you - this was a wonderful explanation
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
Best card flip video I've ever seen!
Thank you for your very kind comment. Made my day :)
And this video saved my day ;)
very good simple explanation!
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 :)
Everything explained, understable. Great video!
This was was professionally simplified for me... Much thanks
You're very welcome :)
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.
Great Tutorial, it helped so much...
perfect explanation, an informative video. Thank you for explaining everything step by step
It is working.....very good explanation & coding.
Excellent way of explaination. Love from Pakistan : )
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
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 :)
Really well explained, thanks so much 😊😊😊😊
An amazing lesson, thank you! you have a new subscriber.
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.
amazing explanation. 👏👏
Thanks :)
Hello sir,
thank you very much for this video.
very clear explanation, direct to the point and very short video.
I'm using this effect for product cards arranged in a grid format, just like at the end of the video, there's an example
I am having difficulties in doing this, could you please help me?
thank you
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!
this is what I need...
thanks for your clear and concise explanation :)
you have a style , great video
You are a amazing tutor. Please do upload more videos like these.
Janet, Singapore
Thank you for the great tutorial! How could i achieve the flip effect not by hovering on the card but by clicking on it?
Hi Sophia, here's how the complete code for flipping on click. It requires a bit of Javascript.
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");
}
wow! great explanation! you also explained the 'why's' keep it up !
Thank you soo much is very helpful and good explained 🥰🥰
Thanks very much! Glad you found it useful :)
It was simple and easy tutorial thank u for making such a fun to learn video.
WOw I love your style
Thank you! Your tutorial is really clear and helpful!
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!!!!!
Sir, nice explanation with amazing tutorial !!
This is amazing and can get that card at center..
Thank you! Really good tutorial. Easy to follow and good explanation!
Couldn't stop me liking this video ❤
haha cheers :)
@@ArjunKhara ❤
Thanks friend. Interesting!
You're the best, thank you !
Thanks very much! :)
thank you sir its really helps me.
I want that card responsive for mobile screen what changes is required?
Great tutorial, you're awesome!
Awesome explanation....
Thank you great tutorial
This was lovely and thoroughly explained. :)
WOW HAT OFF you explain so nicely thank you so much
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 :)
Thank you for that great lesson
Great video thanks!
Good job man, keep up the clear explanations!
Nice video. Learnt a lot.
If i want to open two image like a door what will be the coding, please share..
man i was stuck on this thanks you helped
thankyou for this tutorial, it's save my day ~~
Very good this explanation. Best Regards
Excellent video, I followed the tutorial and almost everything works perfectly, but I have an issue while hovering over the card it starts to flicker abruptly and it is kinda hard to flip the cards, could you help me please?
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");
}
Please make a video on slice box
Just Awesome. this video help me to solve my problem. thanks for this one.
Fantastic tutorial Thank you One question how would you code the front to contain an image
Hi David, if you'd like an image for the front of the card, you can simply swap out the current background (which is #ffc728) to an image URL. I have copied and pasted the entire code below, and marked where the image URL goes. Also note you need to have the background-size: cover; property-value pair if you want the image to fill the background. Remember that large image file sizes do affect loading and animation speeds. You can see at www.qc.sg/workshops/ that I've used images for all of the flip cards. (You need to be on desktop mode to see these, as I've disabled the div on mobile devices for faster loading).
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);
perspective: 1000px;
}
/* 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;
/* IMAGE FOR THE FRONT OF THE CARD */
background: url('upload.wikimedia.org/wikipedia/commons/6/65/Thorn_Tree_Sossusvlei_Namib_Desert_Namibia_Luca_Galuzzi_2004.JPG');
background-size: cover;
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
Arjun Thank you so much for your help Much appreciated I really enjoyed watching your tutorial easy to follow a brilliant tutor . Perhaps you would consider making a video on turning this card flip into a coverflow so two images could be shown as it flips around Thanks once again Regards David
Cool video. How do I make it so that instead of flipping while hover, make it only flip on a single click?
Hi Luke, you will need JavaScript for that. Here's the code:
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");
}
How can I achieve this with a stack of say 4 cards? The front card has buttons & I want it to flip and display the back card as per the user choice (selected button).
Superb. Love it .Thanks
I was just searching for a ready made flash card and went to this haha
Thank you Sir.Amazing Work💯.Im learning a lot from you🙏
I found many ways to but this is crazy
Briliant tutorial and well explained :)
Very useful, thank you very much, Sir!
what is the coding to put more flip card in a row? when i try to copy all the div class=card to make more flip card, they become overlap
Very nice tutorial
Thanks
Does not having the closing tag for the div .maincontainer and .thecard allow the front and back of the card to sit in the same space as the .maincontainer? Or could someone explain this part of it better for me please.