เลื่อนตำแหน่ง (Translate)
ปรับตำแหน่งแนวนอนและแนวตั้งขององค์ประกอบ
หมุน (Rotate)
หมุนองค์ประกอบรอบจุดศูนย์กลาง
ย่อ/ขยาย (Scale)
ย่อหรือขยายองค์ประกอบจากจุดศูนย์กลาง
บิดเอียง (Skew)
บิดเอียงองค์ประกอบตามแกน X และ Y
รูปแบบสำเร็จรูป
การตั้งค่ารูปแบบสำเร็จรูปสำหรับเอฟเฟกต์ที่ใช้บ่อย
ตัวอย่าง
ดูผลลัพธ์การเปลี่ยนแปลงแบบเรียลไทม์
เกี่ยวกับ CSS Transform Generator
CSS Transform Generator เป็นเครื่องมือออนไลน์ที่มีประสิทธิภาพ ช่วยให้คุณสร้างและดูผลลัพธ์ของ CSS transform ได้แบบเรียลไทม์ ปรับค่า translate, rotate, scale และ skew ได้ง่ายๆ เพื่อสร้างเอฟเฟกต์ภาพที่ซับซ้อนให้กับเว็บไซต์ของคุณ
- แสดงผลลัพธ์แบบเรียลไทม์ ปรับปุ๊บเห็นปั๊บ
- ปรับแต่งค่า translate, rotate, scale และ skew ได้อิสระ
- โค้ด CSS พร้อมใช้งาน คัดลอกไปใช้ในโปรเจกต์ได้เลย
คู่มือการใช้งาน CSS Transform ฉบับสมบูรณ์
เรียนรู้การใช้ CSS transforms อย่างละเอียดพร้อมเครื่องมือปรับแต่งแบบเห็นภาพ
ทำความเข้าใจ CSS Transforms
CSS transforms ช่วยให้คุณปรับเปลี่ยนรูปร่างและตำแหน่งของ element ได้ทั้งแบบ 2D และ 3D เรียนรู้วิธีสร้างเอฟเฟกต์สวยๆ ด้วยฟังก์ชัน translate(), rotate(), scale(), และ skew()
ฟังก์ชัน Transform:
- translate(x, y): ย้ายตำแหน่งในแนวนอนและแนวตั้ง
- rotate(angle): หมุนตามองศาที่กำหนด
- scale(x, y): ย่อหรือขยายขนาดตามสัดส่วน
- skew(x, y): บิดรูปทรงแกน X และ Y
แนวปฏิบัติที่ดีที่สุด
- • ใช้ transform เพื่อประสิทธิภาพที่ดีกว่าการเปลี่ยนค่า position
- • ผสมผสานหลายคำสั่ง transform เพื่อสร้างแอนิเมชันที่ซับซ้อน
- • ทดสอบการแสดงผลในหลายๆ เบราว์เซอร์
- • คำนึงถึงประสิทธิภาพบนอุปกรณ์มือถือ
ตัวอย่างการใช้งาน:
เอฟเฟกต์ตอน hoverแอนิเมชันตอนโหลดทรานส์ฟอร์ม 3Dแกลเลอรีรูปภาพแอนิเมชันเมนู
ตารางอ้างอิง CSS Transform
| ฟังก์ชัน | รูปแบบคำสั่ง (Syntax) | ตัวอย่าง |
|---|
| เลื่อนตำแหน่ง (Translate) | translate(x, y) | translate(50px, 20px) |
| หมุน (Rotate) | rotate(angle) | rotate(45deg) |
| ย่อ/ขยาย (Scale) | scale(x, y) | scale(1.5, 1.2) |
| บิดเอียง (Skew) | skew(x-angle, y-angle) | skew(15deg, 5deg) |