Sử dụng thuộc tính transform-style với CSS

Sử dụng transform-style property để đặt cách các phần tử lồng nhau được hiển thị trong không gian 3D.

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>
  <body>
    <h1>Xoay 3D</h1>
    <div class="demo1">Demo
      <div class="demo2">Demo
        <div class="demo3">
          Demo
        </div>
      </div>
    </div>
  </body>
</html>