DEV Community

Ahmed Zougari
Ahmed Zougari

Posted on

6 2

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>
Enter fullscreen mode Exit fullscreen mode

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 */
}
Enter fullscreen mode Exit fullscreen mode

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay