3D Hover Animation in css

HTML कोड

<div class="cards">
  <figure class="card">
    <figcaption class="card_title">3D Hover</figcaption>
  </figure>
</div>

HTML की व्याख्या

1. <div class="cards">:

   • यह एक कंटेनर (container) है, जिसमें कार्ड रखा गया है।
   • class="cards" का उपयोग CSS में स्टाइलिंग के लिए किया गया है, जो 3D प्रभाव के लिए perspective सेट करता है।

2. <figure class="card">:

   • <figure> टैग का उपयोग एक कार्ड को रिप्रेजेंट करने के लिए किया गया है।
   • class="card" इस कार्ड को स्टाइल करने के लिए CSS में उपयोग होता है। यह कार्ड का मुख्य ढांचा है।

3. <figcaption class="card_title">3D Hover</figcaption>:

   • <figcaption> टैग कार्ड के अंदर टेक्स्ट (शीर्षक) को दर्शाता है, जो इस मामले में "3D Hover" है।
   • class="card_title" इस टेक्स्ट को स्टाइल करने के लिए CSS में उपयोग होता है।

CSS कोड

अब CSS कोड को एक-एक करके समझते हैं। यह कोड कार्ड को 3D इफेक्ट देता है, जिसमें होवर करने पर कार्ड और उसका टेक्स्ट 3D स्टाइल में मूव करता है।

1. .cards स्टाइल

.cards {
  perspective: 500px;
}

• perspective: 500px;:
  • यह प्रॉपर्टी 3D प्रभाव के लिए दूरी सेट करती है, जिससे कार्ड को गहराई (depth) का अहसास होता है।
  • 500px का मतलब है कि उपयोगकर्ता का दृष्टिकोण (viewpoint) कार्ड से 500 पिक्सल की दूरी पर है। इससे 3D इफेक्ट और गहरा दिखता है।

2. .card स्टाइल

.card {
  width: 200px;
  height: 250px;
  background: #16161d;
  border: 2px solid #555555;
  border-radius: 4px;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.5s;
}

• width: 200px; और height: 250px;:
  • कार्ड की चौड़ाई 200 पिक्सल और ऊंचाई 250 पिक्सल सेट की गई है।
• background: #16161d;:
  • कार्ड का बैकग्राउंड रंग गहरा ग्रे (#16161d) है।
• border: 2px solid #555555;:
  • कार्ड के चारों ओर 2 पिक्सल मोटी ग्रे बॉर्डर है।
• border-radius: 4px;:
  • कार्ड के कोनों को हल्का गोल (rounded) करने के लिए।
• position: relative;:
  • कार्ड को रिलेटिव पोजिशनिंग दी गई है ताकि इसके अंदर के एलिमेंट्स (जैसे टेक्स्ट) को सही जगह पर रखा जा सके।
• transform-style: preserve-3d;:
  • यह प्रॉपर्टी 3D प्रभाव को सपोर्ट करती है, जिससे कार्ड और इसके बच्चे (child elements) 3D स्पेस में मूव कर सकें।
• will-change: transform;:
  • ब्राउज़र को बताता है कि यह एलिमेंट ट्रांसफॉर्म (घुमाव, स्केल आदि) होने वाला है, जिससे परफॉर्मेंस बेहतर होती है।
• transition: transform .5s;:
  • जब कार्ड पर कोई ट्रांसफॉर्म इफेक्ट (जैसे घूमना) होगा, तो वह 0.5 सेकंड में स्मूथली होगा।

3. .card:hover स्टाइल

.card:hover {
  transform: translateZ(10px) rotateX(20deg) rotateY(20deg);
}

• यह स्टाइल तब लागू होती है जब उपयोगकर्ता माउस को कार्ड पर लाता है (होवर करता है)।
• transform: translateZ(10px) rotateX(20deg) rotateY(20deg);:
  • translateZ(10px): कार्ड को Z-अक्ष (गहराई) में 10 पिक्सल आगे की ओर लाता है, जिससे 3D प्रभाव दिखता है।
  • rotateX(20deg): कार्ड को X-अक्ष पर 20 डिग्री घुमाता है (ऊपर-नीचे की दिशा में)।
  • rotateY(20deg): कार्ड को Y-अक्ष पर 20 डिग्री घुमाता है (बाएं-दाएं की दिशा में)।
  • कुल मिलाकर, होवर करने पर कार्ड थोड़ा आगे आता है और हल्का सा घूमता है, जिससे 3D इफेक्ट बनता है।

4. .card_title स्टाइल

.card_title {
  color: #fff;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  transition: transform 0.5s;
  font: 700 1.5rem monospace;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0
      #000;
}

• color: #fff;:
  • टेक्स्ट का रंग सफेद है।
• position: absolute;:
  • टेक्स्ट को कार्ड के अंदर absolute पोजिशनिंग दी गई है, ताकि इसे कार्ड के रिलेटिव पोजिशन के आधार पर सही जगह पर रखा जा सके।
• top: 50%; और transform: translateY(-50%);:
  • टेक्स्ट को कार्ड के वर्टिकली बीच में रखने के लिए। top: 50% टेक्स्ट को कार्ड के 50% ऊंचाई पर लाता है, और translateY(-50%) इसे थोड़ा ऊपर शिफ्ट करता है ताकि यह बिल्कुल बीच में आए।
• right: 20px;:
  • टेक्स्ट को कार्ड के दाहिनी ओर से 20 पिक्सल की दूरी पर रखता है।
• transition: transform .5s;:
  • टेक्स्ट पर कोई ट्रांसफॉर्म इफेक्ट होने पर वह 0.5 सेकंड में स्मूथली होगा।
• font: 700 1.5rem monospace;:
  • टेक्स्ट का फ़ॉन्ट bold (700 वेट), 1.5rem साइज़, और monospace स्टाइल में है।
• text-shadow:
  • टेक्स्ट के चारों ओर काला शैडो जोड़ा गया है, जिससे टेक्स्ट को थोड़ा उभरा हुआ और पढ़ने में आसान बनाया गया है।

5. .card:hover .card_title स्टाइल

.card:hover .card_title {
  transform: translateZ(50px);
}

• जब माउस कार्ड पर होवर करता है, तो टेक्स्ट पर यह स्टाइल लागू होती है।
• transform: translateZ(50px);:
  • टेक्स्ट को Z-अक्ष पर 50 पिक्सल आगे की ओर लाता है। इससे टेक्स्ट कार्ड से और बाहर निकलता हुआ प्रतीत होता है, जो 3D इफेक्ट को और बढ़ाता है।

कुल मिलाकर कोड का प्रभाव

• यह कोड एक कार्ड बनाता है, जो डार्क थीम में है और उसमें "3D Hover" टेक्स्ट लिखा है।
• जब आप माउस को कार्ड पर लाते हैं, तो:
  • कार्ड हल्का सा घूमता है (20 डिग्री X और Y अक्ष पर) और थोड़ा आगे आता है (10 पिक्सल Z-अक्ष पर)।
  • टेक्स्ट और भी ज्यादा आगे आता है (50 पिक्सल Z-अक्ष पर), जिससे 3D प्रभाव और गहरा लगता है।
• सारी एनिमेशन स्मूथ होती हैं, क्योंकि transition प्रॉपर्टी का उपयोग किया गया है।

उदाहरण के लिए

• अगर आप इस कोड को ब्राउज़र में चलाएंगे, तो आपको एक 200x250 पिक्सल का डार्क कार्ड दिखेगा, जिसमें दाहिनी ओर "3D Hover" लिखा होगा।
• माउस को कार्ड पर ले जाने पर कार्ड थोड़ा घूमेगा और टेक्स्ट आगे निकलेगा, जिससे 3D प्रभाव बनेगा।

महत्वपूर्ण नोट

• यह कोड 3D इफेक्ट के लिए perspective और transform प्रॉपर्टीज़ का उपयोग करता है, जो आधुनिक ब्राउज़रों में अच्छे से काम करता है।
• अगर आप इसे और बेहतर करना चाहते हैं, तो आप कार्ड में और स्टाइल्स (जैसे ग्रेडिएंट बैकग्राउंड, इमेज, या शैडो) जोड़ सकते हैं।