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

การแปลง 3 มิติ: rotateX rotateY translateZ

หมุนและเลื่อนองค์ประกอบในพื้นที่สามมิติด้วยฟังก์ชันการแปลง CSS 3 มิติ

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

ภาพรวมการแปลง 3 มิติ

การแปลง 3 มิติของ CSS ขยายระบบ 2 มิติไปสู่มิติที่สามโดยใช้แกน Z เปิดใช้ 3 มิติด้วย perspective บนองค์ประกอบแม่ และใช้ transform-style: preserve-3d สำหรับองค์ประกอบ 3 มิติที่ซ้อนกัน

rotateX()

rotateX(angle) หมุนองค์ประกอบรอบแกน X แนวนอน คล้ายการพลิกหน้ากระดาษเข้าหาหรือออกจากตัวคุณ

  <div class="page"><div class="leaf">Leaf</div></div>

rotateY()

rotateY(angle) หมุนรอบแกน Y แนวตั้ง คล้ายการหมุนประตูรอบบานพับ

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

rotateZ()

rotateZ(angle) เหมือนกับฟังก์ชัน rotate() ใน 2 มิติทุกประการ เป็นการหมุนในระนาบของหน้าจอ

rotate3d()

rotate3d(x, y, z, angle) หมุนรอบเวกเตอร์แกน 3 มิติแบบกำหนดเอง ค่า x, y และ z ใช้กำหนดทิศทางของแกน

  <div class="element">3D</div>

translateZ()

translateZ() ย้ายองค์ประกอบเข้าหาหรือออกจากผู้ชมตามแนวแกน Z ค่าบวกจะทำให้องค์ประกอบเข้าใกล้ ส่วนค่าลบจะทำให้องค์ประกอบห่างออกไป

  <div class="scene-z">
    <div class="layer-front">Front</div>
    <div class="layer-back">Back</div>
  </div>

translate3d()

translate3d(x, y, z) ย้ายองค์ประกอบไปตามทั้งสามแกนพร้อมกัน การใช้ translateZ(0) จะบังคับให้องค์ประกอบเลื่อนขึ้นไปอยู่บนเลเยอร์ของ GPU ซึ่งเป็นเทคนิคเพิ่มประสิทธิภาพที่ใช้กันทั่วไป

  <div class="animated">GPU layer</div>

scale3d()

scale3d(x, y, z) ปรับขนาดในสามมิติ scaleZ() ใช้ปรับขนาดความลึก ซึ่งมีประโยชน์สำหรับด้านต่าง ๆ ของลูกบาศก์ 3 มิติ

ตัวอย่างลูกบาศก์ 3 มิติ

สร้างลูกบาศก์โดยใช้การแปลง 3 มิติกับด้านทั้งหก:

  <div class="cube-scene">
    <div class="cube">
      <div class="cube-face front">Front</div>
      <div class="cube-face back">Back</div>
      <div class="cube-face left">Left</div>
      <div class="cube-face right">Right</div>
      <div class="cube-face top">Top</div>
      <div class="cube-face bottom">Bottom</div>
    </div>
  </div>

เอฟเฟกต์พารัลแลกซ์ 3 มิติ

การใช้ translateZ กับองค์ประกอบลูกจะสร้างความลึกในฉาก 3 มิติที่เลื่อนได้ ซึ่งเรียกว่าพารัลแลกซ์ CSS:

  <div class="parallax-scene">
    <div class="far-layer">Far layer</div>
    <div class="close-layer">Close layer</div>
  </div>

การเร่งด้วยฮาร์ดแวร์

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

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

ฟังก์ชันการแปลงใดใช้ย้ายองค์ประกอบไปตามแกน Z เข้าหาหรือออกจากผู้ชม

สรุป

การแปลง CSS 3 มิติใช้ rotateX/Y/Z() เพื่อหมุนรอบแต่ละแกน และใช้ translateZ() เพื่อเคลื่อนที่ในแนวความลึก เปิดใช้ 3 มิติจริงด้วย perspective บนองค์ประกอบแม่ และใช้ transform-style: preserve-3d ใช้ backface-visibility: hidden สำหรับเอฟเฟกต์การพลิก การแปลง 3 มิติจะบังคับให้องค์ประกอบเลื่อนขึ้นไปอยู่บนเลเยอร์ GPU เพื่อให้ภาพเคลื่อนไหวลื่นไหล

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

บทเรียน “การแปลง 3 มิติ: rotateX rotateY translateZ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การแปลง 3 มิติ: rotateX rotateY translateZ”

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

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

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

บทเรียน “การแปลง 3 มิติ: rotateX rotateY translateZ” ใช้เวลานานแค่ไหน

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

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

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

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

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