เครื่องสร้าง Transform

สร้างและดูตัวอย่างคุณสมบัติ CSS transform ด้วยภาพ

CSS Transform เป็นคุณสมบัติ CSS ที่ทรงพลังที่ช่วยให้คุณสามารถแปลงองค์ประกอบเว็บในพื้นที่ 2D หรือ 3D ได้ ด้วยการแปลงเช่น translate, rotate, scale และ skew คุณสามารถสร้างการออกแบบเว็บแบบไดนามิกและโต้ตอบได้ สร้างเอฟเฟกต์ที่ต้องการได้อย่างง่ายดายด้วยการแสดงตัวอย่างแบบเรียลไทม์

การตั้งค่า Transform

ปรับคุณสมบัติ Transform แต่ละรายการ

Translate X (0px)

Translate Y (0px)

Scale X (1)

Scale Y (1)

Rotate (0°)

Skew X (0°)

Skew Y (0°)

ดูตัวอย่าง

ตรวจสอบเอฟเฟกต์ Transform ที่สร้างขึ้น

Transform

CSS ที่สร้างขึ้น

transform: none;

ค่าที่ตั้งไว้ล่วงหน้า

ลองใช้สไตล์ Transform ที่กำหนดไว้ล่วงหน้า

การอ้างอิงฟังก์ชัน Transform

ฟังก์ชัน Transform

• translate(x, y): translate(x, y): ย้ายองค์ประกอบตามจำนวน x, y
• scale(x, y): scale(x, y): ปรับขนาดองค์ประกอบตามอัตราส่วน x, y
• rotate(angle): rotate(angle): หมุนองค์ประกอบตามมุม
• skew(x, y): skew(x, y): บิดเบือนองค์ประกอบตามองศา x, y

เคล็ดลับการใช้งาน

• สามารถรวมฟังก์ชัน Transform หลายฟังก์ชันได้โดยคั่นด้วยช่องว่าง
• เปลี่ยนจุดกำเนิดการแปลงด้วย transform-origin
• ใช้ร่วมกับ transition เพื่อสร้างเอฟเฟกต์แอนิเมชันที่ราบรื่น
• ใช้คุณสมบัติ perspective สำหรับการแปลง 3D

📚 คู่มือ CSS Transform ฉบับสมบูรณ์

คู่มือโดยละเอียดเพื่อเชี่ยวชาญ CSS Transform

🎯 แนวคิดพื้นฐานของ Transform

CSS Transform เป็นคุณสมบัติ CSS ที่เปลี่ยนรูปร่าง ขนาด และตำแหน่งขององค์ประกอบ ช่วยให้สามารถแปลงองค์ประกอบด้วยภาพโดยไม่รบกวนการไหลของเอกสารปกติ

ไวยากรณ์พื้นฐาน:

transform: function(value) function(value) ...;

📐 รายละเอียดฟังก์ชัน Transform

🔄 Translate (การเคลื่อนที่)

• translate(x, y): translate(x, y): ย้ายตามแกน X, Y
• translateX(x): translateX(x): ย้ายตามแกน X เท่านั้น
• translateY(y): translateY(y): ย้ายตามแกน Y เท่านั้น
• translate3d(x, y, z): translate3d(x, y, z): การเคลื่อนที่ 3D

transform: translate(50px, 100px);

📏 Scale (การปรับขนาด)

• scale(x, y): scale(x, y): ปรับขนาดแกน X, Y
• scaleX(x): scaleX(x): ปรับขนาดแกน X เท่านั้น
• scaleY(y): scaleY(y): ปรับขนาดแกน Y เท่านั้น
• มากกว่า 1 ขยาย, น้อยกว่า 1 ย่อ

transform: scale(1.5, 0.8);

🔄 Rotate (การหมุน)

• rotate(angle): rotate(angle): หมุนรอบแกน Z
• rotateX(angle): rotateX(angle): หมุนรอบแกน X
• rotateY(angle): rotateY(angle): หมุนรอบแกน Y
• ใช้หน่วย deg, rad, turn สำหรับมุม

transform: rotate(45deg);

📐 Skew (การเฉือน)

• skew(x, y): skew(x, y): เฉือนตามแกน X, Y
• skewX(angle): skewX(angle): เฉือนตามแกน X
• skewY(angle): skewY(angle): เฉือนตามแกน Y
• แปลงเป็นรูปร่างสี่เหลี่ยมด้านขนาน

transform: skew(15deg, 5deg);

🎨 Transform Origin (จุดแปลง)

คุณสมบัติ transform-origin กำหนดจุดกำเนิดการแปลง ค่าเริ่มต้นคือศูนย์กลางขององค์ประกอบ (50% 50%)

การใช้คำหลัก

transform-origin: top left;

การใช้เปอร์เซ็นต์

transform-origin: 25% 75%;

การใช้พิกเซล

transform-origin: 10px 20px;

⚡ เคล็ดลับการเพิ่มประสิทธิภาพ

✅ คำแนะนำ

• สร้างแอนิเมชันเฉพาะ transform และ opacity
• ใช้คุณสมบัติ will-change
• ใช้การเร่งความเร็ว 3D (translateZ(0))
• สร้างเลเยอร์คอมโพสิตเพื่อประสิทธิภาพที่ดีขึ้น

❌ สิ่งที่ควรหลีกเลี่ยง

• การสร้างแอนิเมชันความกว้าง, ความสูง
• การสร้างแอนิเมชันตำแหน่งซ้าย, บน
• การซ้อน transform ที่มากเกินไป
• การใช้ will-change ที่ไม่จำเป็น

ตัวอย่างการเพิ่มประสิทธิภาพ:

.optimized {
  will-change: transform;
  transform: translateZ(0); /* 3D 가속 */
  transition: transform 0.3s ease;
}

🎬 แอนิเมชันและการเปลี่ยนผ่าน

Transform สามารถใช้ร่วมกับ CSS Transition และ Animation เพื่อสร้างเอฟเฟกต์ที่ราบรื่น

ตัวอย่าง Transition

.hover-effect {
  transition: transform 0.3s ease;
}
.hover-effect:hover {
  transform: scale(1.1) rotate(5deg);
}

ตัวอย่าง Keyframe Animation

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }

🌐 ความเข้ากันได้ของเบราว์เซอร์

CSS Transform รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด แต่เบราว์เซอร์รุ่นเก่าอาจต้องใช้คำนำหน้าผู้ขาย

ตัวอย่างคำนำหน้าผู้ขาย:

-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */

🎯 ตัวอย่างการใช้งานจริง

เอฟเฟกต์โฮเวอร์ของการ์ด

.card {
  transition: transform 0.3s ease;
  cursor: pointer;
}
.card:hover {
  transform: translateY(-10px) scale(1.02);
}

ตัวหมุนโหลด

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
}

เอฟเฟกต์การเข้าของโมดอล

.modal {
  transform: scale(0) rotate(180deg);
  transition: transform 0.3s ease;
}
.modal.show {
  transform: scale(1) rotate(0deg);
}

เอฟเฟกต์การคลิกปุ่ม

.button {
  transition: transform 0.1s ease;
}
.button:active {
  transform: scale(0.95);
}

🔧 เครื่องมือดีบักและการพัฒนา

เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์

• การแก้ไขแบบเรียลไทม์ในแผง Elements
• ตรวจสอบค่าสุดท้ายในแท็บ Computed
• การวิเคราะห์ประสิทธิภาพด้วยแท็บ Performance
• ตรวจสอบโครงสร้างเลเยอร์ด้วย 3D View

คุณสมบัติ CSS ที่มีประโยชน์

• transform-style: preserve-3d
• perspective: 1000px
• backface-visibility: hidden
• will-change: transform

💡 เคล็ดลับมืออาชีพ

เคล็ดลับประสิทธิภาพ

การใช้ transform3d() หรือ translateZ(0) เพื่อสร้างเลเยอร์คอมโพสิตสำหรับการเร่งความเร็ว GPU สามารถปรับปรุงประสิทธิภาพแอนิเมชันได้อย่างมาก

เคล็ดลับการเข้าถึง

ใช้ media query prefers-reduced-motion เพื่อให้ทางเลือกสำหรับผู้ใช้ที่ไวต่อการเคลื่อนไหว

เคล็ดลับการออกแบบ

การตั้งค่า transform-origin อย่างเหมาะสมสามารถสร้างเอฟเฟกต์การแปลงที่เป็นธรรมชาติมากขึ้น

เคล็ดลับการพัฒนา

การใช้ตัวแปร CSS เพื่อควบคุมค่า transform แบบไดนามิกทำให้การรวม JavaScript ง่ายขึ้น