Adding elements to your website can make a significant difference in user experience. One such element that can catch the eye and leave a lasting impression is a 3D card flip animation. This effect allows you to create visually appealing card flips that can be used for showcasing products, portfolio items, or any other content you want to highlight.
In this blog post, we’ll walk you through the process of creating a 3D card flip CSS animation step by step.
Step 1: HTML Structure For 3D Card Flip Animation
This HTML code sets up a webpage with a 3D card flip animation. It features a front card face and a back card face with content along with social media icons. The code includes necessary links to fonts and CSS styles to achieve the desired design. Here is the code example:
<!DOCTYPE html> <html lang="en"> <!-- codingflicks.com --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Card Flip CSS Animation</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="flip-card"> <div class="front card"></div> <div class="back card"> <h2>Seaside Serenity</h2> <p> The gentle breeze and the warmth of the sun make it the perfect escape.</p> <p class="socials"> <i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-linkedin"></i> </p> </div> </div> </div> </body> </html>
Step 2: Styling 3D Card Flip Animation
This CSS code sets up a 3D card flip animation within an HTML document. It defines styling for a card container, including its size, perspective, and border radius. When hovered, the card rotates to reveal a back face with a background image, text content, and social media icons.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #212121;
}
.wrapper {
position: relative;
height: 330px;
width: 400px;
perspective: 1000px;
}
.wrapper .flip-card {
position: relative;
height: 100%;
width: 100%;
border-radius: 15px;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
}
.wrapper:hover .flip-card {
transform: rotateY(180deg);
}
.flip-card .card {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background: pink;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
backface-visibility: hidden;
position: absolute;
flex-direction: column;
}
.front.card {
background-image: url(1.jpg);
background-size: cover;
background-position: center center;
border-radius: 15px;
}
.back.card {
transform: rotateY(180deg);
color: #fff;
border-radius: 15px;
}
.back.card h2 {
font-family: bebas neue;
margin-bottom: 7px;
font-size: 40px;
letter-spacing: 2px;
.back.card p {
width: 85%;
text-align: center;
}
.socials {
margin-top: 20px;
}
.socials i {
margin: 0 10px;
font-size: 20px;
}