Geek Code Html CSS Flip Card Effect

CSS Flip Card Effect





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.

Tags: , , , , , , , , , ,

20 thoughts on “CSS Flip Card Effect”

  1. Arjun Khara says:

    Here is the code snippet for this tutorial on CSS flip cards. Feel free to customise the code and content for your projects.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale = 1">
    <title>CSS Card Flip</title>
    <style>
    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 */
    </style>
    </head>

    <body>
    <div class="maincontainer">

    <div class="thecard">

    <div class="thefront"><h1>Front of Card</h1><p>This is the front of the card. It contains important information. Please see overleaf for more details.</p></div>

    <div class="theback"><h1>Back of Card</h1><p>Your use of this site is subject to the terms and conditions governing this and all transactions.</p>
    <button>Submit</button></div>

    </div>
    </div>

    </body>
    </html>

  2. Ryan Stone says:

    Hello, I'm not sure if its the same with your version, but there is a lil' bit of a glitch with these flip 3D cards, when you hover over them and mouse-out but hover back over quickly they sort of glitch out and the two layers intersect. also the hover area when the cards are flipping is pin-pointed in the middle which also can cause a glitchy view or feel to the animation. Have you come across this? I did make a bit of a rough fix by bluring the image slighty as the cards flip which seems to help but its definatley not a great fix. Can you check see if yours are the same.

  3. Ryan Stone says:

    Weird: You set background color to green, its showing purple on my monitor, when I hover the video bar is showing green preview image

  4. Amanda Maria says:

    Is it possible to use click instead of hover? how could i achieve that?

  5. Just Awesome. this video help me to solve my problem. thanks for this one.

  6. Tysm ! Thats totally great and awsome

  7. in my output, why is it overlapping on my table?

  8. i had some problems. if i add padding or border, backface are translate too!! how can i solve this problems

  9. Janet Dsouza says:

    You are a amazing tutor. Please do upload more videos like these.

    Janet, Singapore

  10. thanks for the good tutorial 🙂
    BUT that does not work in safari, IF when I place a picture in front of the flip-image.
    fliping overlaps the front image …..
    do you have a solution for it?
    Many Thanks.

  11. Couldn't stop me liking this video ❤

  12. how do u put the flip cards side by side?

  13. Abhishek De says:

    It is working…..very good explanation & coding.

  14. Very well executed video! Thank you! Sub!

  15. Jane Tracy says:

    Finally you made me understand this flip card effect…. Thanks ☺

Leave a Reply

Your email address will not be published. Required fields are marked *