3D Card Flip Hover Animation | 3D Card Html Css – Codewithrandom
.png "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.
Output
CSS(SCSS) code
@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;
}
Now we have completed our CSS section, Here is our final updated output CSS.
Final Output
