การสร้างแอนิเมชันสำหรับคุณสมบัติ CSS perspective

คุณสมบัติ perspective กำหนดระยะห่างจากผู้ชมถึง z=0 plane (จุดที่ element ขนาดจริง) ค่ายิ่งน้อย = 3D effect ยิ่งเข้มข้น การ animate perspective จะทำให้ความลึกของ 3D transforms เปลี่ยนไป

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo1 {
      position: relative;
      margin-left: 120px;
      height: 250px;
      width: 350px;
      padding: 10px;
      border: 1px solid orange;
      animation: myanim 3s infinite;
      perspective: 200px;
    }
    @keyframes myanim {
      50% {
        perspective: 100px;
      }
    }
    #demo2 {
      padding: 90px;
      position: absolute;
      border: 1px solid black;
      background-color: orange;
      transform: rotateX(60deg);
    }
  </style>
</head>
<body>
  <div id="demo1">
    This is demo text in div1.
    <div id="demo2">This is demo text in div2.</div>
  </div>
</body>
</html>

คำอธิบาย: Container มี perspective เริ่มต้น 200px ลูกหมุน rotateX(60deg) ที่ 50% perspective จะลดเหลือ 100px ทำให้ 3D effect เข้มข้นขึ้น (ดูใหญ่ขึ้น/โค้งมากขึ้น) แล้วกลับไป 200px

คำแนะนำ: ค่า perspective ปกติอยู่ระหว่าง 500px - 1000px สำหรับ UI ทั่วไป ค่าน้อย (100-200px) ใช้สำหรับ dramatic 3D effect

การประยุกต์: Zoom in/out 3D scenes, card flip intensity, carousel depth animation