ดูการเปลี่ยนแปลงของ CSS3 2D

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน.

โมดูลการแปลง เป็นการเพิ่มขึ้นอย่างมากใน CSS3 มันใช้วิธีที่เราจัดการองค์ประกอบบนเว็บไซต์ไปอีกระดับ.

มีการทดลองบางอย่างที่ทำให้ฉันประหลาดใจจริง ๆ ตัวอย่างเช่นอันนี้ อย่างไรก็ตามเราจะไม่สร้างไอคอน CSS อย่างเดียวที่สามารถเปลี่ยนเป็น Autobot ได้เพราะมันอาจจะท่วมท้นและไม่สามารถใช้งานได้ในชีวิตจริงเช่นกัน.

แต่คราวนี้เราจะย้อนกลับไปทบทวนพื้นฐานของการแปลงแบบ CSS3 2D เพื่อดูว่ามันทำงานอย่างไรในระดับพื้นฐาน.

ไวยากรณ์

โดยทั่วไปโมดูลการแปลง CSS3 ช่วยให้เราสามารถแปลงองค์ประกอบในระดับหนึ่งเช่นการแปลการปรับการหมุนและการบิดเบือน.

ไวยากรณ์อย่างเป็นทางการคือ เปลี่ยน: วิธีการ (ค่า). อย่างไรก็ตามเช่นเดียวกับ CSS3 ที่ยอดเยี่ยมอื่น ๆ ที่ยังอยู่ในช่วงเริ่มต้นเบราว์เซอร์ปัจจุบันยังคงต้องการเวอร์ชันไวยากรณ์เพื่อเรียกใช้การแปลง ดังนั้นไวยากรณ์ที่สมบูรณ์จะเป็นดังนี้:

 แปลง: วิธีการ (ค่า); / * W3C ไวยากรณ์อย่างเป็นทางการ * / -o-transform: เมธอด (ค่า); / * Opera 10.5+ * / -ms-transform: method (ค่า); / * Internet Explorer 9.0+ * / -moz-transform: method (ค่า); / * Firefox 3.6+ * / -webkit-transform: เมธอด (ค่า); / * Chrome / Safari 3.2+ * / 

นอกจากนี้วิธีการที่เราอ้างถึงข้างต้นคือ เปลี่ยนฟังก์ชั่น, ซึ่งสามารถแทนที่ด้วยหนึ่งในสิ่งต่อไปนี้: แปล (), ขนาด (), หมุน() หรือ ลาด().

มูลค่า

ค่าของวิธีการส่วนใหญ่จะสอดคล้องกับ แกน X และ แกน Y. หากคุณจำระบบพิกัดคาร์ทีเซียนจากคลาสคณิตศาสตร์ของคุณในโรงเรียนมัธยมหลักการพื้นฐานค่อนข้างคล้ายกันแกน X แสดงถึง ตามแนวนอน เส้นและแกน Y แสดงถึง แนวตั้ง เส้น.

ยกเว้นการหมุน การหมุน จะใช้ พิกัดเชิงขั้ว ซึ่งแสดงเป็นองศาที่มีค่าตั้งแต่ 0 ถึง 360.

ค่าสำหรับวิธีการทั้งหมดสามารถเป็นได้ทั้งค่าลบหรือค่าบวก เพียงแค่จดบันทึกเนื่องจากหน้าเว็บจะถูกอ่านตามลำดับจากบนลงล่างซึ่งทำให้แกน Y ในเว็บทำงานตรงกันข้ามกับหลักการดั้งเดิมของพิกัดคาร์ทีเซียน ซึ่งหมายความว่าเมื่อคุณเพิ่มค่าลบ แกน Y, มันจะย้ายไปด้านบนแทน.

การใช้การแปลงรูป

ตอนนี้เรามาดูการสาธิตพื้นฐานต่อไปนี้เพื่อดูการเปลี่ยนแปลงในการทำงาน.

ฉันแปล

อย่ามัวเมากับคำ แปลความ, มันจะไม่แปลภาษาต่างประเทศ แปลความ นี่คือวิธีการในการเคลื่อนย้ายองค์ประกอบในบางทิศทาง.

วิธีการมีสองค่า; X และ Y. ค่า X ในขณะที่เราชี้ให้เห็นข้างต้นจะใช้องค์ประกอบในแนวนอน ไปทางซ้ายหรือทางขวา, ในขณะที่ Y ค่าจะใช้ในแนวตั้งถึง ด้านล่างหรือด้านบน.

ตอนนี้เรามาดูการสาธิตง่ายๆด้านล่าง:

 div width: 100px; ความสูง: 100px; แปลง: แปล (100px, 250px);  

ตัวอย่างด้านบนจะย้ายองค์ประกอบสำหรับ 100px ไปทางขวาและ 250px ไปที่ด้านล่าง.

 div width: 100px; ความสูง: 100px; แปลง: แปล (100px, 0);  

ตัวอย่างด้านบนจะย้ายองค์ประกอบไปทางขวาเพียง 100px เนื่องจากเราเป็นศูนย์แกน Y จากนั้นหากเราต้องการย้ายองค์ประกอบไปทางซ้ายเราจะต้องตั้งค่าแกน X เป็นลบดังนี้:

 div width: 100px; ความสูง: 100px; แปลง: แปล (-100px, 0);  

• การสาธิต "แปล"

อีกวิธีหนึ่งเราสามารถย้ายองค์ประกอบในทิศทางเดียวด้วยวิธีการเหล่านี้ translateX () และ translateY (), ความแตกต่างคือแต่ละวิธีเหล่านั้นยอมรับเพียงค่าเดียว.

ดังนั้นในทางปฏิบัติการพูด แปลง: แปล (-100px, 0) ก็เท่ากับ แปลง: translateX (-100px).

II - สเกล

ขนาด วิธีการช่วยให้เรา ขยายหรือลด องค์ประกอบจากขนาดที่แท้จริง ค่าของสเกลนั้นเท่ากับ แปลความ วิธีการข้างต้นก็ยังมี X และ Y ความแตกต่างเพียงอย่างเดียวคือเราไม่ได้ระบุหน่วย นี่คือตัวอย่าง:

 div width: 100px; ความสูง: 100px; แปลง: ขนาด (1.5);  

ตัวอย่างข้างต้นจะเป็นการขยาย div 1.5 หรือ 150% ของขนาดที่แท้จริง, และเนื่องจากเราปรับขนาดให้เท่ากันสำหรับทั้ง X และ Y เราจึงต้องประกาศมันเป็นค่าเดียว คุณสามารถประกาศด้วยวิธีนี้ แปลง: ขนาด (1.5,1.5); หากคุณต้องการรายละเอียดเพิ่มเติมก็จะทำเช่นเดียวกัน.

นอกจากนี้หากเราต้องการลดองค์ประกอบเราจะใช้ค่าพิเศษจาก 0.999 ถึง 0 แน่นอนเช่นตัวอย่างด้านล่างซึ่งจะลดขนาดของ div สำหรับ 50% หรือครึ่งหนึ่ง:

 div width: 100px; ความสูง: 100px; แปลง: ขนาด (0.5);  

แต่ระวังถ้าคุณตั้งค่าที่จะแน่นอน “0” div จะหายไปดังนั้นหากคุณไม่มีเหตุผลที่ถูกต้องฉันจะไม่แนะนำให้ทำ.

• การสาธิต "มาตราส่วน"

III - หมุน

ดังที่เราได้กล่าวถึงก่อนหน้าในโพสต์นี้ หมุน วิธีการใช้พิกัดเชิงขั้วดังนั้นค่าที่ระบุไว้ในองศา นี่คือสองตัวอย่าง

ตัวอย่างด้านล่างจะหมุน div 30 องศาตามเข็มนาฬิกา.

 div width: 100px; ความสูง: 100px; แปลง: หมุน (30deg);  

ค่าลบดังแสดงในตัวอย่างด้านล่างจะหมุน div ในทิศทางตรงกันข้าม (ทวนเข็มนาฬิกา) ที่ระดับเดียวกัน.

 div width: 100px; ความสูง: 100px; แปลง: หมุน (-30deg);  

• การสาธิต "หมุน"

IV - เอียง

ลาด method ทำให้เราสามารถสร้างรูปสี่เหลี่ยมด้านขนาน นอกจากนี้ยังมีค่าสองค่าของแกน X และแกน Y อย่างไรก็ตามค่าของตัวเองจะระบุในระดับแทนการวัดเชิงเส้นเหมือนที่เราใช้สำหรับ ขนาด หรือ แปลความ วิธี. นี่คือตัวอย่าง:

 div width: 200px; ความสูง: 100px; เปลี่ยนรูป: เอียง (30deg, 10deg);  

• การสาธิต "เอียง"

V - หลายวิธี

แปลง คุณสมบัติไม่ได้ จำกัด ให้จัดการกับวิธีเดียวเท่านั้นในความเป็นจริงเราสามารถรวมหลายวิธีในการประกาศเดียวเช่นนี้

 div width: 100px; ความสูง: 100px; แปลง: translateX (100px) หมุน (45deg);  

ตัวอย่างด้านบนจะย้ายองค์ประกอบ 100px ไปทางขวาและในเวลาเดียวกันมันยังหมุน 45 องศา.

การสาธิต "หลายวิธี".

แปลงแหล่งกำเนิด

transfrom แหล่งกำเนิด - ตามชื่อของมันหมายถึง - ใช้เพื่อควบคุมจุดเริ่มต้นของการเปลี่ยนแปลง หากเราไม่ได้ประกาศคุณสมบัตินี้อย่างชัดเจนด้วยไวยากรณ์ต่อไปนี้ แหล่งกำเนิดการเปลี่ยนแปลง: X Y;, เบราว์เซอร์จะใช้ค่าเริ่มต้นซึ่งคือ 50% สำหรับ X และ 50% สำหรับ Y.

ตอนนี้ถ้าเราระบุ เปลี่ยนแหล่งกำเนิด ถึง 0 (X) 0 (Y) การแปลงจะเริ่มที่มุมบนซ้าย.

เบราว์เซอร์ทั้งหมดยังคงต้องการเวอร์ชันคำนำหน้าเพื่อเรียกคุณสมบัตินี้ ดังนั้นนี่คือเวอร์ชันสมบูรณ์เพื่อให้แน่ใจว่ามันทำงานได้ในเบราว์เซอร์ปัจจุบันส่วนใหญ่:

 -webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transform-origin: X Y; -ms-transform-origin: X Y; แหล่งกำเนิดการเปลี่ยนแปลง: X Y; 

• การสาธิต "Transform-origin"

ข้อสรุป

เราได้ผ่านทั้งสี่วิธีการเปลี่ยนแปลงที่สำคัญ; แปลปรับขนาดหมุนและเอียง

อย่างไรก็ตามตามที่กล่าวไว้โมดูลนี้ยังอยู่ในช่วงเริ่มต้นดังนั้นหากคุณจะใช้วิธีการเหล่านี้ในเว็บไซต์ต่อไปของคุณตรวจสอบให้แน่ใจว่าเบราว์เซอร์ที่เข้ากันไม่ได้นั้นเสื่อมโทรมลงอย่างงดงาม (ฉันไม่ได้อ้างอิง IE6 ที่นี่).

สุดท้ายคุณสามารถดูตัวอย่างทั้งหมดหรือดาวน์โหลดแหล่งข้อมูลจากลิงค์ต่อไปนี้.

• การสาธิต
• แหล่งดาวน์โหลด