Thuộc tính perspectiveOrigin của Style trong HTML DOM

Thuộc tính perspectiveOrigin của Style trong HTML DOM trả về và cho phép sửa đổi vị trí đặt của một phần tử 3D trên trục x và trục y trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

1. Lấy giá trị perspectiveOrigin

object.perspectiveOrigin

2. Thiết lập perspectiveOrigin

object.perspectiveOrigin = "value"

Ở đây, value có thể là:

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính perspectiveOrigin của Style:

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    perspective: 100px;
  }
  .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 perspectiveOrigin của Style</h1>
<div class='box'></div>
<button class="btn" onclick="set()">Thiết lập PerspectiveOrigin</button>
<script>
  function set() {
    document.body.style.perspectiveOrigin = "20% 50%";
  }
</script>
</body>
</html>

Kết quả

Nhấn vào nút "Thiết lập PerspectiveOrigin" để đặt gốc phối cảnh của hộp màu đỏ.