perspective-originसंपत्ति के लिए मूल निर्धारित करता है perspectiveसंपत्ति। इसे मौजूदा 3 डी-स्पेस के लुप्त बिंदु के रूप में सोचें।
perspectiveसंपत्ति के रूप में ध्यान दें , perspective-originतब्दील बच्चों को गहराई देने के लिए मूल तत्व पर परिभाषित किया जाना चाहिए।
perspective-originसंपत्ति अपने आप में कुछ भी नहीं है। इसे एक तत्व के साथ परिभाषित किया जाना है perspective।
/** * Syntax * perspective-origin: x-position * perspective-origin: x-position y-position * * perspective-origin:
| | constants | inherit */ .element1 ( perspective-origin: 25% 75%; ) .element2 ( perspective-origin: 10px 25px; ) .element3 ( perspective-origin: left bottom; ) नीचे एक डेमो दिखाया गया है कि perspective-originमान (स्थिरांक) बदलकर अपने लुप्त बिंदु को बदलते समय एक 3 डी क्यूब कैसे व्यवहार करता है ।
अरे, चलो परिप्रेक्ष्य-मूल को चेतन करें, सिर्फ मनोरंजन के लिए!
- यह `0% 0%` (शीर्ष बाएं) से शुरू होता है
- फिर `100% 0%` (शीर्ष दाएं) पर जाएं
- फिर `100% 100%` (नीचे दाएं)
- फिर `0% 100%` (नीचे बाएं)
- फिर 1 पर वापस जाएं और पुनः आरंभ करें
ब्राउज़र का समर्थन
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| 12 * | 10 * | 1 1 | १२ | 4 * |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | 3 * | 3.2 * |