🎴 CSS Flip Card Animation – Step-by-Step Hindi Guide

Web design me animations kaafi important hote hain, aur ek popular animation hai Flip Card Effect. Jab user mouse se card par hover kare, to card ulta ghoom kar apna back side dikhata hai. Ye effect portfolio, testimonials, ya product cards ke liye kaafi useful hota hai.

Aayiye step by step samajhte hain.

📝 Step 1: HTML Structure

Sabse pehle ek simple HTML likhte hain:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <p class="title">FLIP CARD</p>
      <p>Hover Me</p>
    </div>
    <div class="flip-card-back">
      <p class="title">BACK</p>
      <p>Leave Me</p>
    </div>
  </div>
</div>

👉 Yaha humne ek main container banaya flip-card naam se.

• Iske andar flip-card-inner hai jo rotate hoga.
• Uske andar do part hain: flip-card-front (front side) aur flip-card-back (back side).

🎨 Step 2: Basic Styling

Sabse pehle card ka size, background aur font set karte hain:

.flip-card {
  background-color: transparent;
  width: 190px;
  height: 254px;
  perspective: 1000px;
  font-family: sans-serif;
}

.title {
  font-size: 1.5em;
  font-weight: 900;
  text-align: center;
  margin: 0;
}

• perspective: 1000px; ka matlab hai ki card 3D effect me ghoomega.
• Width aur height card ka size fix karte hain.

🔄 Step 3: Inner Container ko Rotate Karna

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

• transition: transform 0.8s; se card smoothly 0.8 second me ghoomega.
• transform-style: preserve-3d; 3D rotation ko enable karta hai.

Aur jab hover karein to card rotate ho:

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

👉 Yaha rotateY(180deg) ka matlab hai card apne Y-axis par 180 degree ulta ghoomega.

🖼️ Step 4: Front aur Back Side Styling

.flip-card-front,
.flip-card-back {
  box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border: 1px solid coral;
  border-radius: 1rem;
}

• backface-visibility: hidden; ka matlab hai jab card ghoomega tab dusri side invisible rahegi.
• box-shadow se card ko halka 3D shadow milta hai.

Front Side:

.flip-card-front {
  background: linear-gradient(
    120deg,
    bisque 60%,
    rgb(255, 231, 222) 88%,
    rgb(255, 211, 195) 40%,
    rgba(255, 127, 80, 0.603) 48%
  );
  color: coral;
}

Back Side:

.flip-card-back {
  background: linear-gradient(
    120deg,
    rgb(255, 174, 145) 30%,
    coral 88%,
    bisque 40%,
    rgb(255, 185, 160) 78%
  );
  color: white;
  transform: rotateY(180deg);
}

👉 Notice karo ki back side ko pehle se hi rotateY(180deg) diya gaya hai taki wo ulta hi rahe, aur jab flip ho tab sahi dikhai de.

✅ Final Output

Jab user hover karega card par, to card ekdam smoothly flip hoke apna back side dikhayega.

Is effect ko aap:

• Portfolio cards
• Testimonials
• Pricing tables
• Product showcase

me easily use kar sakte ho.

✨ Is tarah humne ek simple aur beautiful Flip Card Animation CSS ke through banayi.