Cách chỉ định góc nhìn cho phần tử 3D với CSS

Sử dụng thuộc tính CSS perspective để chỉ định góc nhìn về cách các phần tử 3D được xem.

Ví dụ

Bạn có thể chạy mã sau để đạt được điều này:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo1 {
        position: relative;
        width: 150px;
        height: 150px;
        background-color: yellow;
        perspective: 80px;
        margin: 50px;
      }
      .demo2 {
        position: absolute;
        padding: 20px;
        background-color: orange;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h1>Xoay 3D</h1>
    <div class="demo1">Demo
      <div class="demo2">Demo</div>
    </div>
  </body>
</html>