Thuộc tính perspective của Style trong HTML DOM trả về và cho phép sửa đổi cách các phần tử 3D được nhìn thấy trong tài liệu HTML.
Cú pháp
Cú pháp như sau:
1. Lấy giá trị perspective
object.perspective
2. Thiết lập perspective
object.perspective = "value"
Ở đây, value có thể là:
| Giá trị | Giải thích |
|---|---|
| Initial | Đặt thuộc tính này về giá trị mặc định. |
| inherit | Kế thừa giá trị thuộc tính từ phần tử cha. |
| None | Không đặt phối cảnh. |
| length | Chỉ định khoảng cách phần tử được đặt từ khung nhìn theo đơn vị độ dài. |
Ví dụ
Dưới đây là ví dụ minh họa thuộc tính perspective của Style:
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.box {
text-align: center;
width: 200px;
height: 200px;
background-color: #db133a;
transform: rotateX(25deg);
margin: 2rem auto;
}
</style>
<body>
<h1 style="text-align:center">Demo thuộc tính perspective của Style</h1>
<div class='box'></div>
<button class="btn" onclick="set()">Thiết lập Perspective</button>
<script>
function set() {
document.body.style.perspective = "100px";
}
</script>
</body>
</html>
Kết quả
Nhấn vào nút "Thiết lập Perspective" để đặt phối cảnh của hộp màu đỏ.
