Create a Flip card with Pure CSS. The animation is a perfect example of bringing real-world movements to the web. Flip card animation style concept is frequently used in modern Sign-up & Sign-In forms. Flip card animation is also used in JavaScript memory game & many other modern sites. The limitations of this style are mobile hover effects and browser support.
1. HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Flip Card | @code.architects </title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="card"> <div class="card-front"> Hover<br />me </div> <div class="card-back"> <p class="title">Title</p> <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia eveniet totam doloremque iure ex inventore dolore voluptatibus quos quam quasi voluptatem odit, quae, reprehenderit doloribus veritatis expedita placeat molestias ad?</p> </div> </div> </body> </html>
Add the font links in the <head> tag. The fonts are provided from Google fonts.
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet">
2. CSS Code
Resetting the HTML elements code with setting the margin & padding as 0. The box-sizing property allows us to include the padding and border in an element’s total width and height. box-sizing property of the main document is now updated to border-box. ✨
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: rgb(218, 252, 255); font-family: 'Archivo Black', sans-serif; }
We will use the position property of CSS to align the content perfectly center to screen dimensions. The main code resides under a single parent element i.e. ‘card’. This element has 2 child elements. They are front-side as well as the back-side of the card. The parent element is changed to preserve-3d of transform-style and set the perspective property is equal to 600px. Both sides of the card have the width & height as 100% of the parent element to cover the parent element. The backface-property property defines whether or not the back face of an element should be visible when facing the user. In this code, the backface-property of each side of the card is hidden to make sure the other side of the card is visible to the screen.
.card { position: absolute; top: 50%; left: 50%; height: 400px; width: 300px; transform: translate(-50%, -50%); transform-style: preserve-3d; perspective: 600px; transition: 0.5s; } .card-front { width: 100%; height: 100%; position: absolute; background: url("./img/card_cover.jpg"); background-size: contain; top: 0; left: 0; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; font-size: 60px; color: #fff; text-align: center; font-weight: 600; box-shadow: 8px 8px 16px rgba(0,0,0,0.3); transform: rotateX(0deg); transition: 0.5s; } .card-back { width: 100%; height: 100%; position: absolute; top: 0; left: 0; backface-visibility: hidden; box-shadow: 4px 4px 8px rgba(0,0,0,0.15); transform:rotateX(180deg); background: #fff; transition: 0.5s; }
Change the axis of the card using the transform: rotateX() property when the parent element is in hover state. Add the rest of the styling to the elements to further enhancing the card style. You can perform the flip in 2 directions and they are horizontal direction & Vertical direction. To transform the animation direction to Y axis, convert the transform: rotateX() property to transform: rotateY().
.card:hover .card-front { transform: rotateX(-180deg); } .card:hover .card-back { transform: rotateX(0deg) } .title { margin-top: 30px; font-size: 24px; text-align: center; } .desc { padding: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.4; }
3. Output of flip card

The GitHub source code link: https://github.com/code-architects/flip-card and here is the live demo link: https://code-architects.github.io/flip-card/
Share this post, if you have liked it & thanks for scrolling. CSS animations are lot of fun. 😊
You can read our other blogs,
saras
Thank you 🍀
Good article. Keep it up. Go ahead.
Thank you for supporting 😇🤝