Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính phối cảnh HTML DOM Style

Thuộc tính phối cảnh HTML DOM Style trả về và sửa đổi cách các phần tử 3D được xem trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

1. Quan điểm trở lại

object.perspective

2. Điều chỉnh quan điểm

object.perspective = “value”

Đây, giá trị có thể là -

Giá trị Giải thích
Ban đầu Nó đặt giá trị thuộc tính này thành giá trị mặc định.
kế thừa Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó.
Không có Nó không có quan điểm.
chiều dài Nó chỉ định cách phần tử được đặt từ chế độ xem tính theo đơn vị độ dài.

Hãy để chúng tôi xem một ví dụ về Thuộc tính phối cảnh HTML DOM Style -

Ví dụ

<!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">DOM Style perspective Property Demo</h1>
<div class='box'></div>
<button class="btn" onclick="set()">Set Perspective</button>
<script>
   function set() {
      document.body.style.perspective = "100px";
   }
</script>
</body>
</html>

Đầu ra

Thuộc tính phối cảnh HTML DOM Style

Nhấp vào “ Đặt phối cảnh Nút ”để đặt phối cảnh của màu đỏ hộp.

Thuộc tính phối cảnh HTML DOM Style