3d flip card effect html css blogger | 3d flip card blogger Free script

3d flip card blogger Free script -

3d flip card effect html css blogger Code को edit करने के लिए नीचे दी गई फ़ाइल को पहले आप एक्सट्रेक्ट कर लें यदि एक्सट्रेक्ट करने में कोई दिक्कत आ रही है तो 7zip या winrar को अपडेट कर लें। आपको 3d flip card effect html css blogger Code का project मिल जायेगा।  

3d flip card effect blogger - CSS

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');  
 *{  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
  font-family: 'Poppins', sans-serif;  
 }  
 html,body{  
  display: auto;  
  height: 100%;  
  width: 100%;  
  place-items: center;  
  background: #fff;  
 }  
 ::selection{  
  color: #fff;  
  background: #fff;  
 }  
 .wrapper{  
  height: 400px;  
  width: 290px;  
  position: relative;  
  transform-style: preserve-3d;  
      perspective: 1000px;  
 }  
 .wrapper .card{  
  position: absolute;  
  height: 100%;  
  width: 100%;  
  padding: 5px;  
  background: #fff;  
  border-radius: 10px;  
  transform: translateY(0deg);  
  backface-visibility: hidden;  
  transform-style: preserve-3d;  
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);  
  transition: transform 0.7s cubic-bezier(0.4,0.2,0.2,1);  
 }  
 .wrapper:hover > .front-face{  
  transform: rotateY(-180deg);  
 }  
 .wrapper .card img{  
  height: 100%;  
  width: 100%;  
  object-fit: cover;  
  border-radius: 10px;  
 }  
 .wrapper .back-face{  
  display: flex;  
  align-items: center;  
  justify-content: space-evenly;  
  flex-direction: column;  
  transform: rotateY(180deg);  
 }  
 .wrapper:hover > .back-face{  
  transform: rotateY(0deg);  
 }  
 .wrapper .back-face img{  
  height: 150px;  
  width: 150px;  
  padding: 5px;  
  border-radius: 50%;  
  background: linear-gradient(375deg, #1cc7d0, #2ede98);  
 }  
 .wrapper .back-face .info{  
  text-align: center;  
 }  
 .back-face .info .title{  
  font-size: 30px;  
  font-weight: 500;  
 }  
 .back-face ul{  
  display: flex;  
 }  
 .back-face ul a{  
  display: block;  
  height: 40px;  
  width: 40px;  
  color: #fff;  
  text-align: center;  
  margin: 0 5px;  
  line-height: 38px;  
  border: 2px solid transparent;  
  border-radius: 50%;  
  background: linear-gradient(375deg, #1cc7d0, #2ede98);  
  transition: all 0.5s ease;  
 }  
 .back-face ul a:hover{  
  color: #1cc7d0;  
  border-color: #1cc7d0;  
  background: linear-gradient(375deg, transparent, transparent);  

3d flip card effect blogger - HTML

 <!---<title>3D Flip Card on Hover | CodingLab</title>---->  
   <link rel="stylesheet" href="style.css" />  
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>  
   <div class="wrapper">  
    <div class="card front-face">  
     <img src="https://www.wikihow.com/images/thumb/b/bd/Transition-from-a-Female-to-a-Male-%28Transgender%29-Step-9-Version-2.jpg/v4-460px-Transition-from-a-Female-to-a-Male-%28Transgender%29-Step-9-Version-2.jpg.webp" />  
    </div>  
    <div class="card back-face">  
     <img src="https://www.wikihow.com/images/thumb/b/bd/Transition-from-a-Female-to-a-Male-%28Transgender%29-Step-9-Version-2.jpg/v4-460px-Transition-from-a-Female-to-a-Male-%28Transgender%29-Step-9-Version-2.jpg.webp" />  
     <div class="info">  
      <div class="title">Your Name</div>  
      <p><br />front-end developer</p>  
     </div>  
     <ul>  
      <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-instagram"></i></a>  
      <a href="#"><i class="fab fa-youtube"></i></a>  
     </ul>  
    </div>  
   </div>  

3d flip card effect html css blogger Code को edit करने में आ रही किसी भी दिक्क्त के लिए वीडियो देखें।   

3d flip card effect html css blogger, 3d flip card effect, 3d flip card blogger, 3d flip card effect blogger, 3d flip card effect html css,

You have to wait 19 seconds.

Click on Download Button After Time is Over