यह कैसे लागू करने के लिए:
CSS एनिमेशन बहुत मज़ा कर रहे हैं; उनकी सुंदरता यह है कि कई सरल गुणों के माध्यम से, आप एक डब्ल्यूटीएफ-पिक्सार-गर्व प्रभाव में एक सुरुचिपूर्ण फीका से कुछ भी बना सकते हैं। बीच में एक सीएसएस प्रभाव सीएसएस फ्लिप प्रभाव है, जिससे किसी दिए गए कंटेनर के सामने और पीछे दोनों पर सामग्री होती है। यह ट्यूटोरियल आपको उस प्रभाव को यथासंभव सरल तरीके से बनाने के लिए दिखाएगा।
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
दो सामग्री शीशे, "सामने" कर रहे हैं और:
एचटीएमएल
HTML संरचना दो तरफा प्रभाव को पूरा करने के रूप में आप इसे होने की उम्मीद होती है "वापस", जैसा कि आप उम्मीद करेंगे, लेकिन उनके सीएसएस द्वारा बहुत विशिष्ट भूमिकाओं वाले तत्वों सहित दो तत्व भी शामिल हैं। ऑनटचस्टार्ट टुकड़ा भी ध्यान दें जो पैन को टच स्क्रीन पर स्वैप करने की अनुमति देता है।
सीएसएस
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
यहाँ प्रक्रिया का एक किसी न किसी तरह सिंहावलोकन है:
दूरस्थ कंटेनर सेट पूरे एनीमेशन क्षेत्र के नजरिए
आंतरिक कंटेनर है वह तत्व जो वास्तव में फ़्लिप करता है, 180 कताई करता है डिग्री जब पैरेंट कंटेनर पर आच्छादित है। यह भी है जहां आप संक्रमण की गति को नियंत्रित करते हैं। रोटेशन को -180deg में बदलने से तत्वों को विपरीत दिशा में स्पिन किया जाता है।
सामने और पीछे तत्व बिल्कुल स्थित हैं ताकि वे एक ही स्थिति में "ओवरले" कर सकें; उनकी बैकफ़ेस-दृश्यता छिपी हुई है इसलिए फ़्लिप किए गए तत्वों के पीछे एनीमेशन के दौरान प्रदर्शित नहीं होता है।
सामने तत्व वापस तत्व तुलना में एक उच्च z- सूचकांक है तो सामने तत्व पहले कोडित किया जा सकता है लेकिन यह अभी भी शीर्ष
- पर प्रदर्शित करता है वापस तत्व घुमाने 180 डिग्री है, तो के रूप में के रूप में कार्य पीछे।
वास्तव में यह सब कुछ है! इस सरल संरचना को जगह में रखें और फिर प्रत्येक पक्ष को स्टाइल करें जैसा आप चाहें!
सीएसएस फ्लिप टॉगल
अगर आप चाहते हैं तत्व केवल जावास्क्रिप्ट के माध्यम से आदेश पर फ्लिप, तो एक सरल सीएसएस वर्ग टॉगल चाल करना होगा:
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper
{
transform: rotateY(180deg);
}
फ्लिप वर्ग को जोड़ने कंटेनर तत्व जावास्क्रिप्ट का उपयोग कर कार्ड फ्लिप करेगा - कोई उपयोगकर्ता होवर आवश्यक नहीं है। एक जावास्क्रिप्ट टिप्पणी
document.querySelector("#myCard").classList.toggle("flip") फ्लिप करेगा!
सीएसएस कार्यक्षेत्र फ्लिप
एक ऊर्ध्वाधर फ्लिप प्रदर्शन अक्ष flipping और बदलने मूल धुरी मूल्य जोड़ने के रूप में के रूप में आसान है। फ्लिप के मूल अद्यतन किया जाना चाहिए और कार्ड अन्य तरीके से घुमाया:
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 213.5px; /* half of height */
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
आप देख सकते हैं कि एक्स पहुँच इस्तेमाल किया जाता है नहीं वाई
सभी क्रेडिट डेवलपर डेविड वाल्श को जाता है, मैंने अभी सामग्री को पुन: उत्पन्न किया है।
क्रॉस ब्राउज़र के लिए एक काफी लंबा ऑर्डर है। –
आप मौजूदा पुस्तकालयों को पुनर्जीवित करना समाप्त कर देंगे। पुस्तकालय का उपयोग करने में समस्या क्या है? –
@ डैनियल, हाँ मैं सहमत हूं। मैं लंबे समय तक ऐसे समाधान की तलाश में था। लेकिन हमेशा वेबकिट ट्रांसफॉर्म या कुछ jquery प्लगइन पर समाप्त होता है। दुर्भाग्य से मैं इस बार इनका उपयोग नहीं कर सकता क्योंकि समाधान क्रॉस ब्राउज़र होना चाहिए। – manishekhawat