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

คุณสมบัติ transform-origin กำหนดจุดกำเนิด (pivot point) สำหรับการ transform (rotate, scale, skew) การ animate คุณสมบัตินี้จะทำให้การหมุน/ขยายมีจุดศูนย์กลางเปลี่ยนไปเรื่อยๆ

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo1 {
      position: relative;
      height: 300px;
      width: 400px;
      border: 2px solid black;
      margin: 100px;
      padding: 5px;
    }
    #demo2 {
      padding: 30px;
      position: absolute;
      border: 1px solid black;
      background-color: orange;
      transform: rotate(45deg);
      transform-origin: 30% 10%;
      animation: mymove 3s infinite;
    }
    @keyframes mymove {
      30% {
        transform-origin: 0 0 0;
      }
    }
  </style>
</head>
<body>
  <h1>CSS transform-origin property</h1>
  <div id="demo1">
    <div id="demo2">Demo</div>
  </div>
</body>
</html>

คำอธิบาย: กล่องสีส้มหมุนคงที่ 45deg (transform: rotate(45deg)) แต่จุดหมุน (transform-origin) เปลี่ยนจาก 30% 10% (30% จากซ้าย, 10% จากบน) ไปเป็น 0 0 0 (มุมซ้ายบน) ที่ 30% ของแอนิเมชัน ทำให้ดูเหมือนกล่อง "ลอย" หมุนรอบจุดต่างๆ

รูปแบบค่า: transform-origin: x-offset y-offset z-offset (z-offset ใช้กับ 3D transforms)

การประยุกต์: สร้างเอฟเฟกต์การหมุนที่ซับซ้อน เช่น ปิด/เปิดประตู, เข็มนาฬิกา, card flip