backfaceVisibility प्रॉपर्टी का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि जब उपयोगकर्ता द्वारा सामना किया जाता है तो किसी तत्व का पिछला चेहरा दिखाई देगा या नहीं। यह केवल 3D ट्रांसफॉर्म के लिए महत्वपूर्ण है ताकि जब आप तत्व को घुमाते हैं तो आप उसका पिछला भाग देखना चाहते हैं या नहीं।
सिंटैक्स
backfaceVisibility प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.backfaceVisibility = "visible|hidden|initial|inherit"
मान
निम्नलिखित मान हैं:
| क्रमांक | मान एवं विवरण |
|---|---|
| 1 | visible यह पिछले हिस्से को दृश्यमान बनाता है और यह डिफ़ॉल्ट मान है। |
| 2 | hidden यह पिछले हिस्से को छुपाता है। |
| 3 | Initial इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| 4 | inherit पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
backfaceVisibility प्रॉपर्टी का उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> div { position: relative; height: 80px; width: 80px; background-color: lightgreen; float: left; text-align: center; letter-spacing: 0.8px; margin-bottom:10px; } #one { transform: rotateY(180deg); backface-visibility: visible; } p{ clear:both; } </style> <script> function visibilityChange(){ document.getElementById("one").style.backfaceVisibility="hidden"; document.getElementById("Sample").innerHTML="The backface visibility is now set to hidden."; } </script> </head> <body> <div id="one">Lateral Inversion</div> <div>Lateral inversion</div> <br> <p>Click the below button to change the above div backface visibility value</p> <button onclick="visibilityChange()">CHANGE VISIBILITY</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
CHANGE VISIBILITY बटन पर क्लिक करने पर:
