Thuộc tính backfaceVisibility được sử dụng để chỉ định liệu mặt sau của một phần tử có hiển thị hay không khi người dùng nhìn thấy. Điều quan trọng là chỉ đối với các chuyển đổi 3D để khi bạn xoay phần tử bạn muốn xem mặt sau của nó hay không.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính backfaceVisibility -
object.style.backfaceVisibility = "visible|hidden|initial|inherit"
Giá trị
Sau đây là các giá trị -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | hiển thị Điều này làm cho mặt sau có thể nhìn thấy và là giá trị mặc định. |
| 2 | ẩn Điều này ẩn mặt sau. |
| 3 | Ban đầu Để đặt thuộc tính này thành giá trị ban đầu. |
| 4 | kế thừa Để kế thừa giá trị tài sản mẹ. |
Ví dụ
Chúng ta hãy xem một ví dụ cho thuộc tính 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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút THAY ĐỔI KHẢ NĂNG -
