3D Card Flip Hover Animation | 3D Card Html Css – Codewithrandom
3D Card Flip Hover Animation | 3D Card Html Css – Codewithrandom
Welcome🎉 to Code With Random blog. In this blog, we learn how to create a 3D Card Html Css. We use HTML & CSS for 3D Card Html Css. Hope you enjoy our blog so let’s start with a basic HTML structure for the 3D Card Html Css.
HTML code
<div class="container">
<h1>Our Plans</h1>
<div class="card-container">
<div class="card-wrapper">
<div class="card light">
<div class="text-overlay">
<h2>Individual</h2>
<div class="price">$79 <small>/ year</small></div>
<div class="details-text">
<span>1 contributor</span>
<span>Up to 10 projects</span>
<span>24/7 support</span>
</div>
</div>
<div class="purchase-button-container">
<h2 class="back-h2">Individual</h2>
<i class="fa-solid fa-person"></i>
<div class="purchase-button light">Purchase</div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="card dark">
<div class="text-overlay">
<h2>Team</h2>
<div class="price">$129</div>
<div class="details-text">
<span>10 contributors</span>
<span>Up to 50 projects</span>
<span>24/7 support</span>
</div>
</div>
<div class="purchase-button-container">
<h2 class="back-h2">Team</h2>
<i class="fa-solid fa-people-group"></i>
<div class="purchase-button dark">Purchase</div>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="card light">
<div class="text-overlay">
<h2>Organization</h2>
<div class="price">$199</div>
<div class="details-text">
<span>100 contributors</span>
<span>Up to 200 projects</span>
<span>24/7 support</span>
<span>Access to Beta features</span>
</div>
</div>
<div class="purchase-button-container">
<h2 class="back-h2">Organization</h2>
<i class="fa-solid fa-building"></i>
<div class="purchase-button light">Purchase</div>
</div>
</div>
</div>
</div>
</div>
There is all HTML code for the 3D Card Html Css. Now, you can see output without CSS, then we write CSS for the 3D Card Html Css.

Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Source+Sans+Pro:wght@400;700&display=swap');
$dark: #272727;
$light: #fbfbfb;
$animation-speed-fast: .8s;
$animation-speed-slow: 1s;
body {
margin: 0;
height: 100vh;
background-color: #d6d6d6;
font-family: 'Libre Baskerville', serif;
font-family: 'Source Sans Pro', sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
}
.card {
width: 230px;
height: 325px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
position: relative;
perspective: 1000px;
transform: perspective(1000px) translateY(0);
transform-style: preserve-3d;
transition: transform $animation-speed-fast ease-in-out;
&.dark{
background-color: $dark;
color: $light;
.purchase-button{
border: 1px solid indianred;
}
}
&.light{
background-color: $light;
color: $dark;
.purchase-button{
border: 1px solid indianred;
}
}
}
.card-container{
display: flex;
}
.card-wrapper{
}
.card-wrapper:hover{
.card{
transform: rotateY(179deg);
z-index: 2;
.text-overlay{
opacity: 0;
transform-style: preserve-3d;
z-index: 1;
}
.purchase-button-container{
opacity: 1;
}
}
}
.text-overlay{
transform: perspective(1000px) translateY(0) translateZ(80px);
transition: transform $animation-speed-fast ease-in-out, opacity $animation-speed-slow ease;
pointer-events: none;
width: 100%;
perspective: inherit;
padding-top: 50px;
}
h1{
color: $dark;
}
h2{
font-size: .9rem;
text-align: center;
font-weight: 500;
}
.price{
text-align: center;
font-size: 1.8rem;
font-weight: 900;
margin: 20px;
}
.purchase-button-container{
color: indianred;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
left: 0;
top: 0;
transform: perspective(1000px) rotateY(179deg) translateY(0) translateZ(80px);
opacity: 0;
z-index: -1;
transition: transform $animation-speed-fast ease-in-out, opacity $animation-speed-slow ease;
width: 100%;
height: 100%;
.purchase-button{
padding: 10px 40px;
border-radius: 50px;
font-size: 1.2rem;
transition: background-color .25s ease, color .25s ease;
cursor: pointer;
&.light:hover{
background-color: indianred;
color: $light;
}
&.dark:hover{
background-color: indianred;
color: $dark;
}
}
}
.details-text{
margin-top: 20px;
display: flex;
gap: 10px 10px;
align-items: center;
text-align: center;
flex-direction: column;
color: #858585;
font-size: .75rem;
}
small{
font-size: .75rem;
font-weight: 100;
color: #858585;
}
.fa-solid{
font-size: 3rem;
margin-bottom: 2rem;
}
.back-h2{
font-size: 2rem;
margin-top: 0;
}