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

คุณสมบัติ perspective-origin กำหนดตำแหน่งจุดมอง (vanishing point) สำหรับ 3D transforms ของ child elements การ animate คุณสมบัตินี้จะทำให้มุมมอง 3D เปลี่ยนไปเรื่อยๆ

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo1 {
      position: relative;
      margin: auto;
      height: 250px;
      width: 350px;
      padding: 10px;
      border: 2px solid orange;
      perspective: 125px;
      animation: myanim 3s infinite;
    }
    @keyframes myanim {
      70% {
        perspective-origin: 5px 30%;
      }
    }
    #demo2 {
      padding: 70px;
      position: absolute;
      border: 2px solid black;
      background-color: blue;
      color: white;
      transform: rotateX(30deg);
    }
  </style>
</head>
<body>
  <h1>CSS perspective-origin property</h1>
  <div id="demo1">
    This is demo text in div1.
    <div id="demo2">This is demo text in div2.</div>
  </div>
</body>
</html>

คำอธิบาย: Container (#demo1) มี perspective: 125px สร้างมุมมอง 3D ลูก (#demo2) หมุนรอบแกน X 30 องศา เริ่มต้น perspective-origin อยู่กึ่งกลาง (default 50% 50%) ที่ 70% จะเปลี่ยนเป็น 5px 30% (ใกล้ขวาบน) ทำให้มุมมองของลูกเปลี่ยนไป

ความแตกต่าง perspective vs perspective-origin:

• perspective: ระยะห่างจากผู้ชมถึง z=0 plane (ความเข้มข้นของ 3D effect)
• perspective-origin: จุดบนหน้าจอที่ผู้ชมมองอยู่ (ตำแหน่ง X, Y)

การประยุกต์: สร้าง parallax effect, 3D carousel, interactive 3D scenes