Sử dụng thuộc tính perspective trong CSS

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

Ví dụ

Bạn có thể chạy mã sau để làm việc với thuộc tính perspective:

<!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>