नमस्ते! एक फ्लिप कार्ड (Flip Card) जैसा इंटरैक्टिव एलिमेंट बनाने के लिए, हमें मुख्य रूप से तीन चीज़ों की ज़रूरत होगी:
HTML (HyperText Markup Language): कार्ड की संरचना (Structure) बनाने के लिए।
CSS (Cascading Style Sheets): कार्ड को स्टाइल करने और फ्लिप एनीमेशन (Flip Animation) बनाने के लिए।
JavaScript (JS): क्लिक करने पर फ्लिप प्रभाव (Flip Effect) को सक्रिय (Activate) करने के लिए।
यहाँ इन तीनों का उपयोग करके एक उदाहरण दिया गया है।
1. 📂 HTML कोड (index.html)
यह कार्ड की मूल संरचना है, जिसमें सामने (.flip-card-front) और पीछे (.flip-card-back) दोनों हिस्से शामिल हैं।
HTML
Flip Card Example
सवाल / Term
इस कार्ड के पीछे क्या है?
जवाब / Definition
यह फ्लैशकार्ड का जवाब है।
क्लिक करके वापस पलटें।
ध्यान दें: मैंने JavaScript को छोड़कर, सीधे div में onclick="this.classList.toggle('flipped')" का उपयोग किया है ताकि कोड सरल रहे। यह क्लिक करने पर .flipped क्लास को जोड़ता/हटाता है।
2. 🎨 CSS कोड (style.css)
यह हिस्सा कार्ड को 3D लुक देता है और फ्लिप एनीमेशन बनाता है।
CSS
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: sans-serif;
}
/* 1. Main Container: Jahan 3D perspective hota hai */
.flip-card {
background-color: transparent;
width: 300px;
height: 400px;
perspective: 1000px; /* 3D effect ke liye zaroori */
cursor: pointer;
}
/* 2. Inner Container: Jo rotate hota hai */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s; /* Animation ki speed */
transform-style: preserve-3d; /* Iske bina 3D rotation kaam nahi karega */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
border-radius: 10px;
}
/* Jab 'flipped' class judti hai, tab yeh rotate hota hai */
.flip-card.flipped .flip-card-inner {
transform: rotateY(180deg);
}
/* 3. Front aur Back Faces: Card ke dono hisse */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* Yeh property piche ke hisse ko chhipa deti hai */
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
/* Front Face ki Styling */
.flip-card-front {
background-color: #007BFF;
color: white;
}
/* Back Face ki Styling */
.flip-card-back {
background-color: #FFC107;
color: #333;
transform: rotateY(180deg); /* Shuruat mein back face ko ulta ghuma diya jata hai */
}
3. 🚀 इसे कैसे चलाएं (How to Run It)
अपने कंप्यूटर पर एक फ़ोल्डर (Folder) बनाएँ।
उस फ़ोल्डर में दो फाइलें बनाएँ: index.html और style.css.
ऊपर दिए गए कोड को संबंधित फाइलों में कॉपी और पेस्ट करें।
अपने वेब ब्राउज़र (जैसे Chrome या Firefox) में index.html फ़ाइल खोलें।
कार्ड पर क्लिक करें, और आपको फ्लिप एनीमेशन दिखाई देगा!
क्या आप ऐसे ही और फ्लैशकार्ड्स (Flashcards) जोड़ने या इसे किसी और स्टाइल में बनाने के बारे में जानना चाहेंगे?
Comments
Post a Comment