3D Card Flip Hover Animation | 3D Card Html Css – Codewithrandom

 <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

Now we have completed our CSS section,  Here is our updated output with CSS. Hope 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…..

1. How to design HTML Loader using HTML CSS JAVASCRIPT

2. Simple CSS loaders | 8+ Easy Css loaders with only Html 

3. Circular Progress Bar using HTML,CSS and Javascript – Codewithrandom