How to make a flip card effect using HTML5 & CSS3

the final result

hello everyone and welcome to a new tutorial , i decided in this tutorial to teach an easy way to make a flip card using only HTML5 and CSS3 , we will start by creating the HTML part of our card , then we will add the css , i will , of course explain some of the css property so let's begin .

1-HTML part

we will start by creating our html file , let's call him " index.html " and we will add to the <body> 3 divs ,

the parent div with class ="card" that will containt two others divs

1 div with class="card-face card-face-back" for the back face

1 div with class="card-face card-face-front" for the front face

and this is our final index.html

<!DOCTYPE HTML>

<html>

    <head>
        <meta charset="utf-8">
        <title>Flip Card</title>
        <link rel="stylesheet" href="main.css">
    </head>

    <body>
    
            <div class="card">
                <div class="card-face card-face-back">
                    <h1>back face</h1>
                </div>
                
                <div class="card-face card-face-front">
                    <h1> front face</h1>
                </div>
        
            </div>
    
    </body>
    
    
</html>

know let's start with the css part

2-CSS part

we will first add a color to our body :

body{



    background: #f44336;

}

and let's start styling our card :

.card{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 200px;
    perspective: 1000px;
}

as you can see i make it absolute to center it and to make the two child div supeposable and i added a perspective property . for those who don't know the perspective property i invite you to check this small tutorial on w3schools.com and know let's add the common property of the two faces of card:

.card-face{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    background-color: #fafafa;
    box-shadow: 0 2px 15px rgba(64,64,64,.6);
    padding: 30px;
    backface-visibility: hidden;
     transform-origin: center;
    transition: all .9s;
    
}

here i will explain two property the first one is backface-visibility: hidden; it allow us to make the back face hidden and this is exactly what we need for our card the second one is transform-origin: center; this property will allow us to transform our element from it's center , this is mean it will rotate, scale , translate relative to it's center. know let code the back face card

.card-face-back{
   
    transform: rotateY(180deg);
    
}

it's simple i just rotated it 180deg with the Y axis and know i will code my hover effect

.card:hover .card-face-front{
    transform: rotateY(-180deg);
}
.card:hover .card-face-back{
    transform: rotateY(0deg);
}

as you can see i added the hover two my parent element " card" and selected the child element and i applied the rotation and we finished with our flip card you can see it and tell me how it looks , also you can added whatever you want to your front or back face the result will stay clean. i will publish a video 14th feb on how to apply this cool effect on a real project visit my channel and subscribe and tell me what on the comment if you faced a problem , Thank you for reading