2D Transform Functions ใน CSS

2D Transform Functions: Translate, Scale, Rotate, Skew

ฟังก์ชัน 2D transform ใช้กับ property transform เปลี่ยนรูปทรง/ตำแหน่งองค์ประกอบแบบ 2 มิติ ไม่กระทบ document flow

ฟังก์ชันหลัก 4 ตัว

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    div { width: 100px; height: 100px; background-color: rgb(255, 0, 128); border: 2px solid rgb(0, 35, 150); margin: 20px; display: inline-block; color: white; }
    .rotate { transform: rotate(20deg); }
    .translate { transform: translate(30px, 20px); }
    .scale { transform: scale(2, 1); margin-left: 70px; }
    .skew { transform: skew(20deg); }
  </style>
</head>
<body>
  <h1>2D Transform Functions Example</h1>
  <div class="rotate">ROTATE()</div>
  <div class="skew">SKEW()</div>
  <div class="scale">SCALE()</div>
  <div class="translate">TRANSLATE()</div>
</body>
</html>

Transform Origin

จุดศูนย์กลางการ transform: transform-origin: x y (default: 50% 50% = center)

.rotate { transform-origin: top left; transform: rotate(45deg); }

รวมหลาย Transform (Chaining)

.combined {
  transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(10deg);
  /* ลำดับสำคัญ: translate → rotate → scale → skew */
}

Matrix Function

matrix(a, b, c, d, e, f) – รวม transform ทั้งหมดใน matrix 2x3 คำนวณได้จาก JavaScript: element.style.transform หรือ getComputedStyle(el).transform