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.

 @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


Now we have completed our CSS section,  Here is our updated output with CSSHope you like the 3D Card Html Css, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a 3D Card Html Css using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Joshua Salazar

Check out more…..



Leave a Reply