2D Transform Functions: ย้าย, หมุน, ขยาย, ทวistes องค์ประกอบ
CSS transform property ใช้ฟังก์ชัน 2D transform เปลี่ยนรูปทรง/ตำแหน่งองค์ประกอบโดยไม่กระทบ Document Flow (ไม่ผลักองค์ประกอบอื่น)
ฟังก์ชัน 2D Transform หลัก
| Function | คำอธิบาย | ตัวอย่าง |
|---|---|---|
| translate(x, y) | เลื่อนตาม X, Y axis | translate(30px, 20px) |
| translateX(n) | เลื่อนตาม X axis | translateX(50px) |
| translateY(n) | เลื่อนตาม Y axis | translateY(-20px) |
| scale(x, y) | ขยาย/หด ความกว้าง, สูง | scale(2, 1.5) |
| scaleX(n) / scaleY(n) | ขยาย/หด แกนเดียว | scaleX(2) |
| rotate(angle) | หมุนตามจุดศูนย์กลาง | rotate(45deg) |
| skew(x-angle, y-angle) | เผื่อน/บิด ตาม X, Y | skew(20deg, 10deg) |
| matrix(a,b,c,d,e,f) | Matrix 2D (6 ค่า) รวมทุก transform | matrix(1, 0.2, 0, 1, 30, 20) |
โค้ดตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
div { width: 100px; height: 100px; background-color: rgb(98, 0, 255); 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</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 (default: 50% 50% = center):
.rotate { transform-origin: top left; transform: rotate(45deg); }Performance
- Transform ไม่ trigger layout/repaint – GPU accelerated
- ใช้สำหรับ animation แทน top/left/width/height
will-change: transformบอก browser เตรียม layer
