Cách render phần tử lồng nhau trong không gian 3D (transformStyle) bằng JavaScript

Thuộc tính transformStyle xác định cách các phần tử con lồng nhau được render trong không gian 3D. Hai giá trị: flat (mặc định, làm phẳng con vào mặt phẳng cha) và preserve-3d (giữ không gian 3D, con có thể xoay riêng trong 3D).

Ví dụ minh họa

Mã sau bật preserve-3d cho div2, cho phép div3, div4 xoay 3D độc lập khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #div1 {
      position: relative;
      margin: 10px;
      height: 200px;
      width: 200px;
      padding: 20px;
      border: 2px solid blue;
    }
    #div2 {
      padding: 80px;
      position: absolute;
      border: 2px solid blue;
      background-color: yellow;
      transform: rotateY(45deg);
    }
    #div3 {
      padding: 50px;
      position: absolute;
      border: 2px solid blue;
      background-color: green;
      transform: rotateY(60deg);
    }
    #div4 {
      padding: 110px;
      position: absolute;
      border: 2px solid blue;
      background-color: red;
      transform: rotateY(60deg);
    }
  </style>
</head>
<body>
  <button onclick="setTransformStyle()">Bật preserve-3d</button>
  <div id="div1">DIV1
    <div id="div2">DIV2
      <div id="div3">DIV3</div>
      <div id="div4">DIV4</div>
    </div>
  </div>
  <script>
    function setTransformStyle() {
      document.getElementById("div2").style.transformStyle = "preserve-3d";
      /* Giờ div3, div4 sẽ render trong không gian 3D thực sự, không bị làm phẳng */
    }
  </script>
</body>
</html>

flat vs preserve-3d

Lưu ý quan trọng

• Đặt trên phần tử CHA: transformStyle phải đặt trên **container cha** của các phần tử 3D, không phải trên chính phần tử bị transform.
• Cần perspective: Container cha (hoặc ancestor) nên có perspective để thấy hiệu ứng 3D rõ rệt.
• Không kế thừa: Con không tự động kế thừa preserve-3d; mỗi cấp cần set riêng nếu muốn giữ 3D sâu hơn.
• Hiệu năng: preserve-3d có thể kích hoạt compositing layer, tốn GPU memory hơn.