Để đặt phối cảnh, hãy sử dụng phối cảnh thuộc tính trong JavaScript.
Ví dụ
Bạn có thể thử chạy đoạn mã sau để thiết lập quan điểm về cách các phần tử 3D được xem bằng JavaScript -
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
margin: auto;
height: 200px;
width: 200px;
padding: 20px;
border: 2px solid blue;
perspective: 100px;
}
#div2 {
padding: 80px;
position: absolute;
border: 2px solid BLUE;
background-color: yellow;
transform: rotateX(45deg);
}
#div3 {
padding: 50px;
position: absolute;
border: 2px solid BLUE;
background-color: green;
transform: rotateX(30deg);
}
</style>
</head>
<body>
<p>Change the property of div</p>
<button onclick = "myFunction()"> Set Perspective </button>
<div id = "div1">DIV1
<div id = "div2">DIV2</div>
<div id = "div3">DIV3</div>
</div>
<script>
function myFunction() {
document.getElementById("div1").style.perspective = "90px";
}
</script>
</body>
</html>