คุณสมบัติ HTML DOM Style backfaceVisibility

คุณสมบัติ backfaceVisibility ใช้ระบุว่าด้านหลังขององค์ประกอบจะมองเห็นได้หรือไม่ เมื่อผู้ใช้มองมัน สำคัญสำหรับการแปลง 3D (3D transforms) เพื่อให้ทราบว่าเมื่อคุณหมุนองค์ประกอบ คุณต้องการให้เห็นด้านหลังหรือไม่

ไวยากรณ์ (Syntax)

object.style.backfaceVisibility = "visible|hidden|initial|inherit"

ค่าที่ใช้ได้ (Values)

ตัวอย่าง (Example)

<!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>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

เมื่อคลิกปุ่ม CHANGE VISIBILITY: