Thuộc tính backfaceVisibility trong HTML DOM Style

Thuộc tính backfaceVisibility kiểm soát việc mặt sau của phần tử có hiển thị khi được xoay 3D hay không. Chỉ có ý nghĩa khi sử dụng kết hợp với transform: rotateY() hoặc rotateX().

Cú pháp

Để thiết lập backfaceVisibility:

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

Các giá trị

Ví dụ

Ví dụ minh họa 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 = "backfaceVisibility đã được đặt thành hidden"; 
  } 
</script> </head> 
<body> 
<div id="one">Đảo ngược</div> 
<div>Bình thường</div> 
<br> 
<p>Nhấn nút để ẩn mặt sau của div đầu tiên</p> 
<button onclick="visibilityChange()">THAY ĐỔI HIỂN THỊ</button> 
<p id="Sample"></p> 
</body> </html>

Kết quả

Ban đầu div xoay 180° vẫn hiển thị chữ "Đảo ngược":

Sau khi nhấn nút, mặt sau bị ẩn, div trở nên trống: