perspectiveसीएसएस संपत्ति एक तत्व जेड विमान और उपयोगकर्ता के बीच की दूरी को प्रभावित करने से एक 3 डी-स्थान मिलता है।
प्रभाव की ताकत मूल्य द्वारा निर्धारित की जाती है। छोटा मान, आप Z प्लेन से जितना अधिक निकट होंगे और दृश्य प्रभाव उतना ही प्रभावशाली होगा। अधिक से अधिक मूल्य, अधिक सूक्ष्म प्रभाव होगा।
महत्वपूर्ण: कृपया ध्यान दें कि तत्व का प्रतिपादन किस तरह प्रभावित होता है, इस बात को प्रभावित नहीं करता है; यह बस बच्चों के तत्वों के लिए एक 3 डी-स्थान को सक्षम करता है। यह transform: perspective()फ़ंक्शन और perspectiveसंपत्ति के बीच मुख्य अंतर है । पहला तत्व गहराई देता है जबकि बाद में अपने सभी रूपांतरित बच्चों द्वारा साझा 3 डी-स्पेस बनाता है।
/** * Syntax * perspective: none | */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); ) उपरोक्त डेमो का उद्देश्य फ़ंक्शन और संपत्ति के बीच अंतर दिखाना है।
- बाईं ओर, आप मूल
perspective: 50emतत्वों (transform: rotateY(50deg)) में परिवर्तित तत्वों ( ) के लिए लागू संपत्ति देख सकते हैं । - दाईं ओर, परिप्रेक्ष्य को बच्चों पर सीधे परिवर्तन से लागू किया जाता है (
transform: perspective(50em) rotateY(50deg))।
इससे पता चलता है कि माता-पिता के लिए सभी बच्चों को एक ही 3 डी-स्पेस साझा करने के तरीके और इस तरह एक ही गायब होने के दृष्टिकोण को कैसे सेट किया जाए।
चलो कुछ भी कूलर की कोशिश करें: 3 डी ट्रांसफ़ॉर्म और परिप्रेक्ष्य के साथ एक क्यूब।
यहां बताया गया है कि क्यूब कैसे बनाया जाता है: यह दो नेस्टेड रैपर पर निर्भर करता है (एक क्यूब को परिप्रेक्ष्य देने के लिए और एक को सभी पक्षों को लपेटने के लिए) और 6 तत्वों को बनाने के लिए। प्रत्येक तत्व को 3 डी-स्पेस (जैसे transform: rotateX(90deg) translateZ(1em)) में अनुवाद करने और घुमाने के लिए अपना स्वयं का रूपांतर दिया जाता है ।
आइए एक डेमो के साथ समाप्त करें जो यह दर्शाता है कि वास्तविक दुनिया के डिजाइन का आधार क्या हो सकता है: परिप्रेक्ष्य और परिवर्तन का उपयोग करते हुए तस्वीरों की दीवार + कैप्शन।
जब दीवार पर मँडराते हैं, तो बच्चों को प्रभाव को रद्द करते हुए, वापस उनकी सामान्य स्थिति में ले जाया जाता है।
महत्वपूर्ण! परिप्रेक्ष्य का उपयोग करना (0 या किसी से भिन्न मान के साथ) एक नया स्टैकिंग संदर्भ बनाता है।
ब्राउज़र का समर्थन
| क्रोम | सफारी | फ़ायर्फ़ॉक्स | ओपेरा | अर्थात | एंड्रॉयड | आईओएस |
|---|---|---|---|---|---|---|
| 12+ | कोई | 10+ | कोई नहीं | 10+ | 3+ | कोई |
फ़ायरफ़ॉक्स 10-15 की जरूरत -moz-, WebKit ब्राउज़र की आवश्यकता हो सकती है -webkit-