transform प्रॉपर्टी के ट्रांसफॉर्मेशन मेथड: scale() का उपयोग करके शुद्ध CSS के साथ होवर पर एलिमेंट्स को ज़ूम/स्केल-अप करना सीखें।
होवर पर ज़ूम/स्केल-अप
इस बॉक्स पर अपना माउस ले जाने का प्रयास करें:
यह मूल आकार का ठीक 1.5 गुना स्केल करता है — इसलिए जब आप इसके ऊपर अपना माउस ले जाते हैं (होवर) तो यह 50% बड़ा हो जाता है।
CSS
transformप्रॉपर्टी का स्केल मेथड या तो एलिमेंट्स के आकार को बढ़ा या घटा सकता है। यह 3D और 2D दोनों में काम करता है। इस सरल उदाहरण में, हम 2D का उपयोग करते हैं।
उपरोक्त उदाहरण को फिर से बनाने के लिए, हमें 1 HTML एलिमेंट और 2 CSS नियम-सेट की आवश्यकता है।
HTML
पहले zoom-box नामक क्लास एट्रिब्यूट के साथ अपना HTML एलिमेंट बनाएं:
<div class="zoom-box"></div>CSS
फिर अपने स्टाइलशीट में यह CSS जोड़ें:
.zoom-box { background-color:#CF4B32; width: 100px; height: 100px; margin: 32px auto; transition: transform .2s; /* एनिमेशन */ } .zoom-box:hover { transform: scale(1.5); }बस इतना ही!
कोड कैसे काम करता है
- सबसे पहले, हम
zoom-boxनामक क्लास एट्रिब्यूट के साथ एक HTML डिव एलिमेंट बनाते हैं। - फिर हम ज़ूम बॉक्स क्लास के लिए दो नियम-सेट बनाते हैं, एक स्टेटिक डिफ़ॉल्ट स्टेट के लिए,
.zoom-boxऔर एक डायनामिक होवर स्टेट के लिए,.zoom-box:hover। - पहले नियम-सेट को कुछ कॉस्मेटिक/आकार प्रॉपर्टीज़ मिलती हैं (
height, width, color)।marginप्रॉपर्टी केवल बॉक्स को सेंटर अलाइन करने के लिए है (वैकल्पिक)। .zoom-boxक्लास का महत्वपूर्ण हिस्साtransitionप्रॉपर्टी है जिसका मानtransformऔर अवधि.2s(200 मिलीसेकंड) है।- दूसरे नियम-सेट
.zoom-box:hoverमें हमtransformप्रॉपर्टी जोड़ते हैं, जिसके मान के रूप मेंscale()मेथड होता है। यह एक पैरामीटर1.5लेता है जो निर्धारित करता है कि होवर पर बॉक्स एलिमेंट को कितना स्केल अप करना चाहिए। 1.5 मूल आकार के 150% जैसा है।
ब्राउज़र संगतता
यहां इस ट्यूटोरियल का कोड एडेड ब्राउज़र वेंडर प्रीफिक्स के साथ है, ताकि यह सभी मुख्यधारा के ब्राउज़रों, क्रोम, फायरफॉक्स, सफारी, ओपेरा में काम करे:
.zoom-box { background-color: #cf4b32; width: 100px; height: 100px; margin: 32px auto; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; /* एनिमेशन */ } .zoom-box:hover { -webkit-transform: scale(1.5); transform: scale(1.5); }जानने योग्य बातें
ध्यान दें कि बॉक्स एलिमेंट उसी ट्रांज़िशन अवधि/टाइमिंग के साथ स्केल अप और डाउन होता है, भले ही हमने transition प्रॉपर्टी केवल .zoom-box क्लास में जोड़ी हो।
ऐसा इसलिए होता है क्योंकि जब transition प्रॉपर्टी को मूल क्लास सिलेक्टर (.zoom-box) में जोड़ा जाता है, तो इसके मान स्वचालित रूप से क्लास से जुड़े हर अतिरिक्त सिलेक्टर में जुड़ जाते हैं, इस मामले में, यह :hover है (जिसे स्यूडो-क्लास भी कहा जाता है)
यदि आप transition प्रॉपर्टी को केवल :hover (स्यूडो) सिलेक्टर क्लास में जोड़ते हैं, तो यह केवल स्केल-अप भाग को एनिमेट करता है — स्केल डाउन नहीं। जैसे ही आप बॉक्स एलिमेंट के बाहर जाते हैं, यह अचानक शून्य (0s) अवधि के साथ स्केल डाउन हो जाता है — जो आप शायद ही कभी चाहते हैं, क्योंकि यह आंखों पर कठोर होता है।
यदि आप अपने एलिमेंट की विभिन्न स्थितियों (ऊपर/नीचे) पर अलग-अलग एनिमेशन प्रकार और अवधि का उपयोग करना चाहते हैं, तो आप बस :hover स्यूडो-क्लास सिलेक्टर में एक transition प्रॉपर्टी जोड़ें, और इसे अलग मान दें।
