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 😇🤝