Hello friends, today in this blog you’ll learn 3D Flip Card Using Html And Css | Flip On Hover . We’ll use Html & Css to create this 3D Flip Card . Earlier I’ve shared a blog on Animated Login Form Using HTML & CSS .
If You have any Problem so, I Also Created a full video tutorial on this 3D Flip Card Using Html And Css you can see this tutorial .
Video Tutorial of ” 3D Flip Card Using Html And Css “
You might like this:
- Css Image Hover Effect Using Html Css | Css Image Card Hover Effect
- Image Cards With Hover Effect Only Using CSS & HTML
- How to Make Profile Card using HTML and CSS
3D Flip Card Using Html And Css [Source Codes]
To create this 3D Flip Card First, you need to create Two files, HTML File And CSS File. After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this 3D Flip Card Using Html And Css from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<!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">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/e48d166edc.js" crossorigin="anonymous"></script>
<title>3D Flip Card</title>
</head>
<body>
<div class="card">
<div class="front">
<img height="400px" width="300px" src="1.jpeg">
</div>
<div class="back">
<div class="details">
<h2>Coding With Nick<br><span>Web Designer</span></h2>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-google-plus-g"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</body>
</html># CSS CODE
Second, you create anCSS file(style.css) and paste the given codes in your CSS file.
/* COPYRIGHT- CODING WITH NICK*/
/* # ⚙️ Technology Used
1. HTML
2. CSS
# 🎓 Access this vedio
[Click Here] https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
## 👏 Support Developer
1. Subscribe & Share my YouTube Channel - https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
2. Add a Star 🌟 to this 👆 Repository */
/************************************************/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');
body{
margin: 0;
padding: 0;
font-family: 'josefin Sans',sans-serif;
}
.card{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 400px;
transform-style: preserve-3d;
perspective: 600px;
transition: 0.5s;
}
.card .front{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
backface-visibility: hidden;
transform: rotateX(0deg);
transition: 0.5s;
}
.card:hover .front{
transform: rotateX(-180deg);
}
.card .back{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
backface-visibility: hidden;
transform: rotateX(180deg);
transition: 0.5s;
}
.card .back:before{
content: '';
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.1);
}
.card:hover .back{
transform:rotateX(0deg) ;
}
.card .back .details{
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
left: 50%;
width: 100%;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.card .back .details h2{
margin: 0;
padding: 0;
font-size: 24px;
color: #fff;
}
.card .back .details h2 span{
color: #a7a7a7;
font-size: 16px;
}
.social-icons{
padding: 10px 0;
}
.social-icons a{
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
background: #262626;
color: #fff;
text-decoration: none;
border-radius: 50%;
transition: 0.5s;
}
.social-icons a .fab{
line-height: 36px;
}
.social-icons a:hover{
background: #a91e63;
}
/* COPYRIGHT- CODING WITH NICK*/That’s all, now you’ve successfully created a 3D Flip Card Using Html And Css | Flip On Hover . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button. It’s free and a .zip file will be downloaded then you’ve extract it.
Read More –
