इस पोस्ट में, हम सीखेंगे कि ग्रेडिएंट बैकग्राउंड के साथ HTML और CSS का उपयोग करके एक स्टाइलिश 3डी फ्लिप कार्ड एनीमेशन कैसे बनाया जाए।

मेरी वेबसाइट पर जाएँ

संरचना को समझना

फ़्लिपिंग प्रभाव बनाने के लिए हम कार्ड के लिए दो पक्षों - आगे और पीछे - का उपयोग करेंगे। यह प्रभाव सीएसएस ट्रांज़िशन का उपयोग करके होवर पर सक्रिय किया जाएगा।

    

      
Front Side
    
    

      
Back Side
    

इस सरल HTML संरचना में दो पक्षों वाला एक div तत्व शामिल है: एक सामने के लिए और एक पीछे के लिए।

.card {
    perspective: 150rem;
    position: relative;
    height: 40rem;
    max-width: 400px;
    margin: 2rem;
    box-shadow: none;
    background: none;
  }

.card-side {
    height: 35rem;
    border-radius: 15px;
    transition: all 0.8s ease;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    padding: 2rem;
    color: white;
}

.card-side.back {
    transform: rotateY(-180deg);
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%,#FFCC70 100%);
}

.card-side.front {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.card:hover .card-side.front {
    transform: rotateY(180deg);
}

.card:hover .card-side.back {
    transform: rotateY(0deg);
}

लाइव डेमो

बैकफेस-विजिबिलिटी: कार्ड के पीछे की सामग्री को तब छुपाता है जब सामने वाला भाग दिखाई देता है, और इसके विपरीत।

कार्ड के पीछे वाले हिस्से को -180डिग्री और सामने वाले हिस्से को 0डिग्री पर सेट करें।

परिप्रेक्ष्य: कार्ड को ऐसा दिखने की अनुमति देकर 3डी प्रभाव में गहराई जोड़ता है मानो वह अंतरिक्ष में फ़्लिप कर रहा हो।

होवर पर, रोटेटवाई() को सामने की ओर 180डिग्री और पीछे की ओर 0डिग्री पर सेट करें।

निष्कर्ष

HTML और CSS की कुछ पंक्तियों के साथ, आप एक शानदार 3डी फ्लिप कार्ड एनीमेशन बना सकते हैं जो आपकी वेबसाइट में एक गतिशील स्पर्श जोड़ता है। इसे विशिष्ट रूप से अपना बनाने के लिए रंगों और प्रभावों के साथ प्रयोग करने का प्रयास करें