backface-visibilityसंपत्ति 3 डी रूपांतरण से संबंधित है। 3 डी परिवर्तनों के साथ, आप एक तत्व को घुमाने का प्रबंधन कर सकते हैं, इसलिए हम एक तत्व के "सामने" के रूप में सोचते हैं जो अब स्क्रीन का सामना नहीं करता है। उदाहरण के लिए, यह स्क्रीन से दूर एक तत्व को फ्लिप करेगा:
.flip ( transform: rotateY(180deg); )ऐसा लगेगा जैसे आपने इसे एक स्पैटुला के साथ उठाया और इसे पैनकेक की तरह फ़्लिप किया। ऐसा इसलिए है क्योंकि डिफ़ॉल्ट के लिए backface-visibilityहै visible। यह दिखने के बजाय, आप इसे छिपा सकते हैं।
.flip ( transform: rotateY(180deg); backface-visibility: hidden; )सरल उदाहरण:
CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन FjwGA देखें।
3 डी इफेक्ट करते समय यह उपयोगी है। उदाहरण के लिए:
ठीक से काम करता है
आगे पीछेWebKit में समस्याग्रस्त क्योंकि बैक-विज़िबिलिटी छिपी नहीं है
आगे पीछेयह फ़ायरफ़ॉक्स में किसी भी कारण से समस्याग्रस्त नहीं है, हालांकि संपत्ति उसी तरह से काम करती है।
उपसर्गों
फ़ायरफ़ॉक्स 10+ और IE 10+ backface-visibilityबिना किसी उपसर्ग के साथ समर्थन करता है । ओपेरा (पोस्ट ब्लिंक, 15+), क्रोम, सफारी, आईओएस और एंड्रॉइड सभी की आवश्यकता है -webkit-backface-visibility।
मूल्यों
- दृश्यमान (डिफ़ॉल्ट) - स्क्रीन के सामने नहीं होने पर भी तत्व हमेशा दिखाई देगा।
- छिपा हुआ - स्क्रीन का सामना नहीं करने पर तत्व दिखाई नहीं देता है।
- विरासत - संपत्ति को इसके मूल तत्व से इसका मूल्य मिलेगा।
- प्रारंभिक - संपत्ति को उसके डिफ़ॉल्ट पर सेट करता है, जो है
visible।
अधिक जानकारी
- 3 डी सीएसएस परीक्षक
- कल्पना
- मोज़िला डॉक्स
ब्राउज़र का समर्थन
यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।
डेस्कटॉप
| क्रोम | फ़ायर्फ़ॉक्स | अर्थात | एज | सफारी |
|---|---|---|---|---|
| 12 * | 10 * | 1 1 | १२ | 4 * |
मोबाइल / टेबलेट
| Android क्रोम | Android फ़ायरफ़ॉक्स | एंड्रॉयड | iOS सफारी |
|---|---|---|---|
| 88 | .५ | 3 * | 3.2 * |