HTML DOM Style biến đổi

Thuộc tính HTML style DOM styleformationStyle trả về và áp dụng phép chuyển đổi 2D hoặc 3D cho một phần tử trong tài liệu HTML.

Cú pháp

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

Trả lại kiểu chuyển đổi

object.style.transformStyle

Sửa đổi kiểu chuyển đổi

object.style.transformStyle = “value”

Giá trị

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

Giá trị	Giải thích
kế thừa	Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó.
đầu tiên	Nó đặt giá trị thuộc tính này thành giá trị mặc định.
phẳng	Nó đặt phần tử con không giữ nguyên vị trí 3D của nó.
keep-3d	Nó đặt phần tử con để bảo toàn vị trí 3D của nó.

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính Kiểu DOM HTML biến đổi -

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      background: lightgreen;
      height: 100vh;
      text-align: center;
   }
   .outer-box {
      position: relative;
      height: 200px;
      width: 200px;
      margin: 80px;
      padding: 5px;
      border: 2px solid black;
   }
   .inner-box1 {
      padding: 50px;
      position: absolute;
      background-color: coral;
      transform: rotateY(40deg);
   }
   .inner-box2 {
      padding: 40px;
      position: absolute;
      background-color: lightblue;
      transform: rotateY(60deg);
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
</style>
</head>
<body>
<h1>DOM Style transformStyle Property Example</h1>
<div class="outer-box">Outer Box
<div class="inner-box1">Inner Box1
<div class="inner-box2">Inner Box2</div>
</div>
</div>
<button onclick="add()" class="btn">Set transformStyle</button>
<script>
   function add() {
      document.querySelector(".inner-box1").style.transformStyle = "preserve-3d";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

HTML DOM Style biến đổi

Nhấp vào “ Đặt kiểu chuyển đổi ”Để áp dụng kiểu biến đổi trên Hộp bên trong 1 -

HTML DOM Style biến đổi