แปล
ชื่อ "แปล" ทำให้เข้าใจผิดเล็กน้อย จริงๆ แล้วมันเป็นวิธีการจัดตำแหน่งองค์ประกอบโดยใช้ค่าพิกัด X และ Y
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #นำทาง{ |
รองรับเบราว์เซอร์
ขณะนี้แอตทริบิวต์การแปลภาษารองรับเฉพาะ Firefox, Safari และ Chrome เท่านั้น และต้องใช้คำนำหน้าส่วนตัวของเบราว์เซอร์ -moz- และ -webkit-
ลาด
Skew ยังเป็นฟังก์ชันการแปลงที่มีประโยชน์ ซึ่งสามารถเอียงวัตถุในมุมที่กำหนดรอบแกน x และ y ได้ ซึ่งแตกต่างจากการหมุนของการหมุนซึ่งจะหมุนเท่านั้นโดยไม่เปลี่ยนรูปร่างขององค์ประกอบ Skew เปลี่ยนรูปร่างขององค์ประกอบ Skew มีพารามิเตอร์สองตัว ซึ่งแสดงถึงความเอียงของแกน x และ y ตามลำดับ
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #นำทาง{ |
รองรับเบราว์เซอร์
ขณะนี้แอตทริบิวต์ Skew รองรับเฉพาะ Firefox, Safari และ Chrome เท่านั้น และใช้คำนำหน้าส่วนตัวของเบราว์เซอร์ -moz- และ -webkit-
เมทริกซ์
ใช่ เมทริกซ์คือเมทริกซ์ เมทริกซ์เป็นสิ่งพื้นฐานในคณิตศาสตร์ขั้นสูงและเป็นฟังก์ชันขั้นสูงมากใน CSS 3 CSS 3 แนะนำฟังก์ชันเมทริกซ์ซึ่งสามารถรับรู้เอฟเฟกต์ต่าง ๆ ข้างต้นได้อย่างยืดหยุ่นมาก มีพารามิเตอร์ 6 ตัว (a, b, c, d, e, f) ซึ่งจริงๆ แล้วเป็นเมทริกซ์ขนาด 3*3 ซึ่งพารามิเตอร์เก่าจะถูกแปลงเป็นค่าใหม่:
|. อาเบะ |
|.ซีดีเอฟ |
|. 0 0 1 |
หากคุณสนใจศึกษาเชิงลึก สามารถดูได้ที่นี่ http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined นี่เป็นเอกสารสำหรับ SVG แต่หลักการของการแปลงเมทริกซ์นั้นเป็นสากล .
ลองดูตัวอย่าง:
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #นำทาง{ |
รองรับเบราว์เซอร์
ข่าวดีก็คือ IE รองรับตัวกรองเมทริกซ์ แม้ว่าจะไม่รองรับฟังก์ชันการแปลง CSS3 ส่วนใหญ่ แต่โดยพื้นฐานแล้วคุณสามารถบรรลุผลเช่นเดียวกันได้โดยใช้ตัวกรองนี้ อย่างไรก็ตาม คุณต้องเข้าใจการดำเนินการของเมทริกซ์ก่อน ทั้ง webkit และ Firefox (3.5+) รองรับฟีเจอร์นี้
ความผิดปกติของโซ่
การแปลงมักจะเป็นแบบสแตนด์อโลน แต่ถ้าคุณต้องการใช้การแปลงหลายรายการพร้อมกัน คุณสามารถรวมโค้ดได้อย่างรวดเร็ว โดยเฉพาะการใช้ส่วนขยายส่วนตัว โชคดีที่เรามีคำย่อในตัว:
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #นำทาง{ |
การเปลี่ยนแปลงเหล่านี้สามารถเชื่อมโยงเข้าด้วยกันเพื่อทำให้โค้ดของคุณมีประสิทธิภาพมากขึ้น:
ต่อไปนี้เป็นเนื้อหาที่ยกมา: นำทาง{ |
พลังที่แท้จริงของคุณสมบัติเหล่านี้ถูกรวมเข้าด้วยกัน คุณสามารถย้าย หมุน ปรับขนาด และควบคุมองค์ประกอบแบบอินไลน์และระดับบล็อกได้โดยไม่ต้องใช้ JavaScript เมื่อการรองรับคุณสมบัติเหล่านี้แพร่หลายมากขึ้น เราสามารถสร้างอินเทอร์เฟซและแอปพลิเคชันที่สมบูรณ์ยิ่งขึ้นและเบาลงได้
เปลี่ยนต้นกำเนิด
การแปลงต้นกำเนิดไม่ใช่ฟังก์ชันย่อยของการแปลง แต่มันเกี่ยวข้องอย่างใกล้ชิดกับการแปลง สามารถใช้เพื่อระบุจุดเริ่มต้นของการแปลง ตัวอย่างเช่น จุดเริ่มต้นเริ่มต้นของการแปลงการหมุนคือจุดกึ่งกลาง คุณสามารถกำหนดจุดเริ่มต้นที่มุมซ้ายบนหรือมุมซ้ายล่างเพื่อให้ผลลัพธ์ของ การเปลี่ยนแปลงแบบหมุนอาจแตกต่างกันมาก
Transformer-Origin ยอมรับพารามิเตอร์สองตัวซึ่งอาจเป็นค่าเฉพาะ เช่น เปอร์เซ็นต์, em, px ฯลฯ หรือพารามิเตอร์เชิงพรรณนา เช่น ซ้าย, กลาง, ขวา หรือบน, กลาง, ล่าง ฯลฯ ตัวอย่างบางส่วน:
ต่อไปนี้เป็นเนื้อหาที่ยกมา: .class1 {-moz-transform-origin: 0 0; |
ความเข้ากันได้ของเบราว์เซอร์
ขณะนี้แอตทริบิวต์นี้รองรับเฉพาะ webkit และ firefox เท่านั้น และจำเป็นต้องเพิ่มคำนำหน้าส่วนตัวของตนเอง