How to make flip card style with 4 lines CSS

HTML Code

This is how your HTML should be :

<div class="card">
  <div class="flip-container">
    <div class="front-face"><!-- front content --></div>
    <div class="back-face"><!-- back content --></div>
  </div>
</div>

CSS Code

This is the basic CSS code you need:

.flip-container{
  transform-style:preserve-3d; /* line 1 */
  transition: transform 1s ease-in-out; /* speed of fliping */
}

.front-face,
.back-face{
  position:absolute; /* line 2 */
  backface-visibility: hidden; /* line 3 */
}

.back-face{
  transform:rotateY(180deg); /* line 4 */
}

.card:hover .flip-container{
  transform:rotateY(180deg); /* line 5 */
}

transform-style:preserve-3d;
* Indicates that the children of the element should be positioned in the 3D space.
position:absolute;
* Make front and back face on top of each other
backface-visibility: hidden;
* The back face is hidden, effectively making the element invisible when turned away from the user.
transform:rotateY(180deg);
* The rotateY() function is an inbuilt function that is used to rotate an element around the vertical axis. (we used it in the back face to hide it and for the hover, effect to show it)