ระบุมุมมอง (Perspective) สำหรับอิลิเมนต์ 3D ด้วย CSS

ใช้คุณสมบัติ CSS perspective เพื่อระบุมุมมองว่าอิลิเมนต์ 3D จะถูกมองอย่างไร ค่ายิ่งน้อยยิ่งดูเด่นชัด (เอฟเฟกต์ 3D แรง)

ตัวอย่างโค้ด

ลองรันโค้ดด้านล่าง:

<!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>Rotation</h1>
  <div class="demo1">Demo
    <div class="demo2">Demo</div>
  </div>
</body>
</html>

คำอธิบาย: perspective: 80px กำหนดระยะห่างจากตาจนถึง तलจอ 3D (z=0) ค่าน้อย = มุมมองกว้าง = เอฟเฟกต์ 3D ชัดเจน ค่ามาก = มุมมองแคบ = เอฟเฟกต์ 3D น้อยลง ต้องใช้ร่วมกับ transform-style: preserve-3d บน child element