การเลื่อน หมุน และปรับขนาด
เลื่อนองค์ประกอบด้วย translate() หมุนด้วย rotate() และปรับขนาดด้วย scale()
การเลื่อน หมุน และปรับขนาด เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณสมบัติการแปลง
transform ใช้การแปลงภาพแบบ 2 มิติและ 3 มิติกับองค์ประกอบ ได้แก่ การเคลื่อนที่ การหมุน การปรับขนาด และการเอียง การแปลงเกิดขึ้น หลังการจัดวาง จึงไม่ส่งผลต่อองค์ประกอบโดยรอบ
translate()
ย้ายองค์ประกอบออกจากตำแหน่งปัจจุบัน โดยรับระยะเลื่อนในแกน x และ y
<div class="card demo-active">Card</div>
<div class="wrap"><div class="centered">Centered</div></div>translateX() translateY() translateZ()
ฟังก์ชันแยกตามแกนเพื่อความชัดเจน:
<div class="slide-in active">Slide panel</div>rotate()
หมุนองค์ประกอบตามมุมที่กำหนด ค่าบวกจะหมุนตามเข็มนาฬิกา
<span class="icon demo-active">➤</span>
<span class="spinner">➤</span>scale()
ปรับขนาดองค์ประกอบให้เท่ากันทุกแกนหรือแยกตามแกน ค่าที่น้อยกว่า 1 จะทำให้เล็กลง ส่วนค่าที่มากกว่า 1 จะทำให้ใหญ่ขึ้น
<button class="btn demo-active">Button</button>
<div class="thumb demo-active">Thumb</div>scaleX() และ scaleY()
ปรับขนาดแยกกันในแกนใดแกนหนึ่ง:
<div class="logo">LOGO</div>การรวมการแปลง
ฟังก์ชันการแปลงหลายรายการจะถูกนำไปใช้ตามลำดับ (จากขวาไปซ้าย) ลำดับมีผลต่อผลลัพธ์
<div class="card demo-active">Card</div>จุดกำเนิดการแปลง
transform-origin กำหนดจุดหมุนสำหรับการหมุนและการปรับขนาด ค่าเริ่มต้นคือจุดกึ่งกลาง (50% 50%)
<div class="card demo-active">Card</div>คุณสมบัติการแปลงแต่ละรายการ
CSS สมัยใหม่อนุญาตให้กำหนดฟังก์ชันการแปลงแต่ละรายการเป็นคุณสมบัติแยกกัน:
<div class="card demo-active">Card</div>การเปลี่ยนผ่านพร้อมการแปลง
การแปลงเป็นหนึ่งในคุณสมบัติสองรายการที่ประกอบการแสดงผลด้วย GPU ควรทำให้เคลื่อนไหวด้วยการเปลี่ยนผ่านเสมอ เพื่อให้เอฟเฟกต์ลื่นไหลและมีประสิทธิภาพ:
<div class="card demo-active">Card</div>translate() เทียบกับ top/left
ควรเลือกใช้ transform: translate() แทน top/left สำหรับการทำภาพเคลื่อนไหวเสมอ การแปลงจะถูกประกอบการแสดงผลด้วย GPU ส่วน top/left จะทำให้คำนวณการจัดวางใหม่ทุกเฟรม
ตรวจสอบความเข้าใจ
ฟังก์ชันการแปลงใดใช้พลิกองค์ประกอบในแนวนอน เช่น การพลิกการ์ด
สรุป
transform ย้าย หมุน และปรับขนาดองค์ประกอบหลังการจัดวาง โดยไม่ส่งผลต่อเนื้อหาโดยรอบ ใช้ translate() สำหรับการเคลื่อนที่ ใช้ rotate() สำหรับการหมุน และใช้ scale() สำหรับการปรับขนาด สามารถเรียกใช้ฟังก์ชันหลายรายการต่อกันในคำประกาศเดียว CSS สมัยใหม่รองรับคุณสมบัติการแปลงแต่ละรายการ ควรทำให้เคลื่อนไหวด้วยการเปลี่ยนผ่านเสมอ เพื่อประสิทธิภาพการประกอบการแสดงผลด้วย GPU
คำถามที่พบบ่อย
บทเรียน “การเลื่อน หมุน และปรับขนาด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเลื่อน หมุน และปรับขนาด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเลื่อน หมุน และปรับขนาด”
เลื่อนองค์ประกอบด้วย translate() หมุนด้วย rotate() และปรับขนาดด้วย scale() คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การเลื่อน หมุน และปรับขนาด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเลื่อน หมุน และปรับขนาด
- การแปลงแบบเอียงและเมทริกซ์
- จุดกำเนิดการแปลงและมุมมอง
- การแปลง 3 มิติ: rotateX rotateY translateZ