0Pricing
CSS Academy · บทเรียน

การแปลงแบบเอียงและเมทริกซ์

สร้างการบิดเบือนแนวทแยงด้วย skew() และใช้เมทริกซ์การแปลงเต็มรูปแบบด้วย matrix()

การแปลงแบบเอียงและเมทริกซ์ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

การแปลงด้วย skew()

skew() ทำให้องค์ประกอบเอียงไปตามแกนหนึ่งหรือทั้งสองแกน และสร้างการบิดเบือนแบบลาดเอียงหรือคล้ายตัวเอียงบนองค์ประกอบบล็อก

  <div class="diagonal-section">Section</div>
  <span class="italic-badge">Badge</span>

skewX() และ skewY()

ใช้การเอียงแยกกันในแต่ละแกน:

  <div class="banner">Slanted background</div>

แก้การเอียงขององค์ประกอบลูก

เมื่อคอนเทนเนอร์ถูกทำให้เอียง องค์ประกอบลูกของคอนเทนเนอร์ก็จะเอียงตามด้วย ให้ใช้การเอียงกลับด้านกับองค์ประกอบลูกเพื่อให้ยังตั้งตรง:

  <div class="container"><p>Child text stays upright</p></div>

การแปลงด้วย matrix()

ฟังก์ชัน matrix(a, b, c, d, tx, ty) เป็นตัวแทนทางคณิตศาสตร์พื้นฐานของการแปลง 2 มิติ โดยรวมการเลื่อนตำแหน่ง การหมุน การปรับขนาด และการเอียงไว้ในการดำเนินการเมทริกซ์เดียว

  <div class="element">Matrix transform</div>

matrix3d() สำหรับ 3 มิติ

matrix3d() ขยายเป็นค่า 16 ค่าเพื่อควบคุมการแปลงแอฟฟีน 3 มิติได้อย่างสมบูรณ์ โดยทั่วไป JavaScript จะสร้างค่านี้สำหรับเอฟเฟกต์ 3 มิติที่ซับซ้อน

การเอียงที่ใช้ได้จริง: ส่วนแนวทแยง

รูปแบบการออกแบบที่นิยม — พื้นหลังของส่วนที่เอียง:

  <div class="section-diagonal"><p>Diagonal background section</p></div>

ใช้การเอียงเพื่อเน้นส่วนติดต่อผู้ใช้

การเอียงช่วยสร้างความน่าสนใจทางภาพให้กับป้าย การตกแต่งด้วยริบบิ้น และข้อความที่เน้น:

  <span class="badge"><span>NEW</span></span>

ใช้ perspective กับบริบท 3 มิติ

การแปลง 3 มิติต้องมีบริบทมุมมองบนองค์ประกอบแม่ perspective กำหนดระยะจากผู้ชมถึงระนาบ z=0

  <div class="scene"><div class="card">Card</div></div>

ลำดับฟังก์ชันการแปลง

ลำดับของฟังก์ชันการแปลงในคำประกาศที่รวมกันมีความสำคัญ rotate then translate ให้ผลต่างจาก translate then rotate:

  <div class="scene-row">
    <span class="order-rotate-first">A</span>
    <span class="order-translate-first">B</span>
  </div>

การทำภาพเคลื่อนไหวให้การเอียง

สามารถทำให้การเอียงเปลี่ยนผ่านได้ เพื่อสร้างเอฟเฟกต์แถบเลื่อนและการพลิกการ์ด และสามารถรวมกับการแปลงอื่นเพื่อให้เกิดการเคลื่อนไหวที่เป็นธรรมชาติ:

  <div class="card demo-active">Card</div>

ตรวจสอบความเข้าใจ

องค์ประกอบหนึ่งมีการใช้ transform: skewX(-15deg) จะเกิดอะไรขึ้นกับองค์ประกอบลูกที่เป็นข้อความ

สรุป

skewX/Y() สร้างการบิดเบือนแบบเอียงสำหรับรอยต่อส่วนตกแต่งและส่วนเน้นแบบไดนามิกของส่วนติดต่อผู้ใช้ ใช้การเอียงกลับด้านกับองค์ประกอบลูกเพื่อให้เนื้อหายังคงตั้งตรง matrix() เป็นการคำนวณทางคณิตศาสตร์พื้นฐานที่รวมการแปลง 2 มิติทั้งหมด ลำดับของฟังก์ชันการแปลงที่เรียกต่อกันมีผลอย่างมากต่อผลลัพธ์สุดท้าย

คำถามที่พบบ่อย

บทเรียน “การแปลงแบบเอียงและเมทริกซ์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การแปลงแบบเอียงและเมทริกซ์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การแปลงแบบเอียงและเมทริกซ์”

สร้างการบิดเบือนแนวทแยงด้วย skew() และใช้เมทริกซ์การแปลงเต็มรูปแบบด้วย matrix() คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การแปลงแบบเอียงและเมทริกซ์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การเลื่อน หมุน และปรับขนาด
  2. การแปลงแบบเอียงและเมทริกซ์
  3. จุดกำเนิดการแปลงและมุมมอง
  4. การแปลง 3 มิติ: rotateX rotateY translateZ
← กลับไปที่ CSS Academy