Thuộc tính style transformStyle trong HTML DOM

Thuộc tính style.transformStyle trong HTML DOM trả về và cho phép áp dụng biến đổi 2D hoặc 3D cho một phần tử trong tài liệu HTML. Thuộc tính này xác định cách các phần tử con được hiển thị trong không gian 3D.

Cú pháp

Lấy giá trị transformStyle

object.style.transformStyle

Thay đổi transformStyle

object.style.transformStyle = "value"

Các giá trị

Giá trị có thể là:

Ví dụ

Ví dụ sử dụng thuộc tính style.transformStyle:

<!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>Ví dụ thuộc tính style transformStyle DOM</h1>
<div class="outer-box">Hộp ngoài
  <div class="inner-box1">Hộp trong 1
    <div class="inner-box2">Hộp trong 2</div>
  </div>
</div>
<button onclick="add()" class="btn">Thiết lập transformStyle</button>
<script>
  function add() {
    document.querySelector(".inner-box1").style.transformStyle = "preserve-3d";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Thiết lập transformStyle để áp dụng kiểu biến đổi 3D cho Hộp trong 1.