Chỉ định cách các phần tử lồng nhau hiển thị trong không gian 3D

Để chỉ định cách các phần tử lồng nhau được hiển thị trong không gian 3D, hãy sử dụng thuộc tính transform-style trong CSS.

Ví dụ

Bạn có thể chạy mã sau để triển khai thuộc tính transform-style:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo1 {
        width: 300px;
        height: 300px;
        background-color: yellow;
      }
      .demo2 {
        width: 200px;
        height: 200px;
        background-color: orange;
      }
      .demo3 {
        width: 100px;
        height: 100px;
        background-color: blue;
        transform: rotate(10deg);
        transform-origin: 30% 40%;
        transform-style: preserve-3d;
      }
    </style>
  </head>
  </head>
  <body>
    <h1>Xoay 3D</h1>
    <div class="demo1">Demo
      <div class="demo2">Demo
        <div class="demo3">
          Demo
        </div>
      </div>
    </div>
  </body>
</html>