CSS transforms สามารถทำอะไรได้?

Question

Accepted Answer

คุณสมบัติ `transform` ช่วยให้คุณ **ย้าย ปรับขนาด หมุน และเบ้า** องค์ประกอบ โดยสายตา — โดยไม่กระทบต่อเลย์เอาต์เอกสาร (องค์ประกอบอื่น ๆ ไม่เคลื่อน) มันเร่งด้วย GPU ซึ่งทำให้เหมาะสำหรับแอนิเมชัน

```css
.box { transform: translate(50px, 20px); }  /* move right 50px, down 20px */
.box { transform: scale(1.5); }              /* 1.5× bigger (0.5 = half) */
.box { transform: rotate(45deg); }           /* rotate clockwise 45° */
.box { transform: skew(10deg); }             /* slant */
```

## การรวม transforms (ลำดับมีความสำคัญ)

```css
.box {
  transform: translateX(100px) rotate(45deg) scale(1.2);
  /* applied right-to-left: scale, then rotate, then translate */
}
```

ฟังก์ชันหลายรายการถูกนำไปใช้ตามลำดับ การเปลี่ยนลำดับเปลี่ยนผลลัพธ์ (หมุนแล้วแปลจะแตกต่างจากแปลแล้วหมุน)

## เหตุใด transforms จึงไม่รบกวนเลย์เอาต์

```css
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
```

แตกต่างจากการเปลี่ยน `width`/`margin` transform จะส่งผลต่อเพียงลักษณะ *ที่วาด* ขององค์ประกอบ ไม่ใช่กล่องของมันในโฟลว์ — ดังนั้นองค์ประกอบรอบข้างจึงอยู่นิ่งและไม่มีการ reflow นี่คือเหตุผลที่ transforms นั่นเรียบลื่น

## รูปแบบทั่วไป

```css
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* hover lift */
.card:hover { transform: translateY(-4px); }

/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
```

เคล็ดลับ `translate(-50%, -50%)` สำหรับการจัดศูนย์กลางอยู่ทั่วไป — มันเลื่อนองค์ประกอบกลับตามครึ่ง *ขนาดของมันเอง*

## ประสิทธิภาพ

```css
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
```

เนื่องจาก transforms ข้ามเลย์เอาต์และ paint (การผสมเท่านั้น) การแอนิเมตพวกเขาจึงยังคงอยู่ที่ 60fps — ถูกกว่าการแอนิเมตตำแหน่ง/ขนาดมาก

## เหตุใดจึงสำคัญ

Transforms เป็นคนงานหนัก CSS แอนิเมชันและไมโครโต้ตอบ (hover lifts, modals, carousels, loading spinners)

พวกเขาย้าย/ปรับขนาด/หมุนโดยไม่เรียกใช้เลย์เอาต์ ดังนั้นพวกเขาจึงทั้งมีพลังและมีประสิทธิภาพ — วิธีที่แนะนำสำหรับการแอนิเมตการเคลื่อนไหวบนเว็บ