toolsmoah

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

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

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

การตั้งค่า Transform
ปรับคุณสมบัติ Transform แต่ละรายการ
ดูตัวอย่าง
ตรวจสอบเอฟเฟกต์ 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 ง่ายขึ้น