Hello Guys in this article i will teach you that How to create a awesome animated 3d flip card using html and css.
you can use this concept and create your own project or section in your website. you can create flip team cards , flip service cards etc. by using this concept. full video tutorial is on my you tube channel.
you can copy the Source Code of this flip card from here.
Full Video Tutorial is on my Youtube Channel. WebDevHere
Here Is the HTML code for Flip Card. 👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- custom css -->
<link rel="stylesheet" href="style.css">
<!-- font awesome cdn for social media icons -->
<script src="https://kit.fontawesome.com/8385bc9e15.js" crossorigin="anonymous"></script>
<title>Flip card</title>
</head>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img1.png" alt="">
</div>
<div class="flip-card-back">
<h1>Maria Grace</h1>
<h6>Graphic Designer</h6>
<p>i am a graphic designer who design graphics for my clients.
Follow me on my social media channels for know more about me </p>
<div class="social">
<a href="#"> <i class="fa-brands fa-facebook"></i> </a>
<a href="#"> <i class="fa-brands fa-instagram"></i> </a>
<a href="#"> <i class="fa-brands fa-twitter"></i> </a>
<a href="#"> <i class="fa-brands fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>
Here Is the CSS code for Flip Card. 👇
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
*{margin: 0; padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: transparent;
}
.flip-card{
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card-front{
background-image: linear-gradient(45deg, #6f04d9, #d9048e);}
.flip-card-front img{
width: 220px;
margin-top: 1rem;
}
.flip-card:hover .flip-card-inner{
transform: rotateY(180deg); }
.flip-card-back{
background-image: linear-gradient(315deg, #6f04d9, #8a045c);
color: #fff;
padding: 20px;
transform: rotateY(180deg);
}
.flip-card-back h1{
font-size: 32px;
font-weight: 600px;
margin-bottom: 0.5rem;
}
.flip-card-back h6{
font-size: 16px;
font-weight: 400;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0.5rem;
}
.flip-card-back p{
font-size: 18px;
line-height: 24px;
font-weight: 400;
margin-bottom: 2rem;
}
.flip-card-back .social a{
font-size: 16px;
background-color: #e0144c;
padding: 10px;
color: #fff;
margin: 0 5px;
border-radius: 50%;
transition: all 0.3s;
text-decoration: none;
}
.flip-card-back .social a:hover{
background-color: #f806cc;}
.flip-card-front,
.flip-card-back{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 16px;
}
Watch full Tutorial..👇
Share the Post and Video with your friends.
