How to make flip card with 5 lines CSS

Flip card is cool idea to show more information on hover effect, and you can do it with just 5 main lines.

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 others
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 which is used to rotate an element around the vertical axis.(we used it in back face to hide it and for the hover effect to show it)

Live Demo 🎥

If you find this example complex for you, check out this simple version on Sandbox.

Thanks for reading.

Connect with me

Twitter

GitHub