การแปลง CSS 3D ใน CSS นอกเหนือจากการแปลงองค์ประกอบ 2D บนเพจแล้ว คุณยังสามารถทำการแปลง 3D บนองค์ประกอบของวัตถุได้ (คิดว่าเพจเป็นพื้นที่สามมิติสำหรับย้าย หมุน ปรับขนาด และเอียงองค์ประกอบบนเพจ ฯลฯ .) เช่นเดียวกับการแปลง 2D การแปลง 3D จะไม่ส่งผลกระทบต่อองค์ประกอบโดยรอบและสามารถทับซ้อนองค์ประกอบอื่นๆ ได้ อย่างไรก็ตาม องค์ประกอบที่ถูกแปลงจะยังคงใช้พื้นที่ในตำแหน่งเริ่มต้น (ก่อนการแปลง)
ระบบพิกัดสามมิติ
ก่อนอื่นมาทำความเข้าใจกับระบบพิกัดสามมิติกันก่อน สิ่งที่เรียกว่าระบบพิกัดสามมิติจะเพิ่มแกน z ให้กับระบบพิกัดสองมิติดั้งเดิม ซึ่งทำให้เกิดช่องว่างสามมิติ ดังแสดงในรูปด้านล่าง:
①แกน x: ตามแนวนอนไปทางขวา หมายเหตุ: ด้านขวาของ x คือค่าบวก และด้านซ้ายเป็นค่าลบ
②แกน y: ลงในแนวตั้ง หมายเหตุ: y มีค่าบวกด้านล่างและค่าลบด้านบน
3 แกน Z: หน้าจอแนวตั้ง หมายเหตุ: ค่าบวกไปทางด้านนอกและค่าลบไปทางด้านใน
คุณสมบัติการแปลง
วิธีการแปลง 3D
1.แปล3d()
ฟังก์ชัน Translate3d() ใช้เพื่อย้ายตำแหน่งขององค์ประกอบในพื้นที่ 3 มิติ ลักษณะของการแปลงนี้คือการกำหนดออฟเซ็ตขององค์ประกอบในแต่ละทิศทาง (แกน X, แกน Y, แกน Z) ผ่านสาม พิกัดเวกเตอร์มิติ รูปแบบไวยากรณ์ของฟังก์ชันจะเป็นดังนี้:
แปล3d(tx, ty, tz)
คำอธิบายพารามิเตอร์มีดังนี้:
(1) tx: หมายถึงระยะทางที่องค์ประกอบเคลื่อนที่ในแนวนอน (แกน X)
(2) ty: หมายถึงระยะทางที่เคลื่อนที่ในทิศทางแนวตั้ง (แกน Z) ขององค์ประกอบ
(3) tz: ระบุระยะทางที่องค์ประกอบเคลื่อนที่บนแกน Z ไม่สามารถใช้ค่าเปอร์เซ็นต์สำหรับพารามิเตอร์นี้ได้
2. แปลZ()
ฟังก์ชัน TranslateZ() ใช้เพื่อย้ายองค์ประกอบไปตามแกน Z ของระบบพิกัดสามมิติ รูปแบบไวยากรณ์ของฟังก์ชันมีดังนี้:
แปลZ(tz);
พารามิเตอร์ tz ใช้เพื่อกำหนดระยะห่างที่องค์ประกอบเคลื่อนที่บนแกน Z
เคล็ดลับ: TranslateZ(tz); เทียบเท่ากับคำย่อของ Translate3d(0, 0, tz);
3.หมุน3d()
ฟังก์ชัน Rotate3d() ใช้เพื่อกำหนดมุมการหมุนขององค์ประกอบตามแกน X แกน Y หรือแกน Z ฟังก์ชันนี้จะหมุนองค์ประกอบตามแกนคงที่เท่านั้นและจะไม่เปลี่ยนรูปองค์ประกอบ รูปแบบไวยากรณ์ของฟังก์ชัน Rotate3d() เป็นดังนี้:
Rotate3d(x,y,z,a)
คำอธิบายพารามิเตอร์มีดังนี้:
x: ตั้งค่าพิกัดแกน X ของแกนหมุน
y: ตั้งค่าพิกัดแกน Y ของแกนหมุน
z: ตั้งค่าพิกัดแกน Z ของแกนหมุน
ก: กำหนดมุมการหมุนขององค์ประกอบ มุมบวกหมายถึงการหมุนตามเข็มนาฬิกา และมุมลบหมายถึงการหมุนทวนเข็มนาฬิกา
4. สเกล3d()
ฟังก์ชัน scale3d() สามารถเปลี่ยนขนาด (มาตราส่วน) ขององค์ประกอบได้ รูปแบบไวยากรณ์ของฟังก์ชันจะเป็นดังนี้:
scale3d(sx,sy,sz)
คำอธิบายพารามิเตอร์มีดังนี้:
sx: หมายถึงอัตราส่วนมาตราส่วนขององค์ประกอบในทิศทางแกน X
sy: แสดงถึงอัตราส่วนสเกลขององค์ประกอบในทิศทางแกน Y
sz: ระบุอัตราส่วนมาตราส่วนขององค์ประกอบในทิศทางแกน Z
5.matrix3d()
ฟังก์ชัน matrix3d() คล้ายกับฟังก์ชัน matrix() ที่เราเรียนมาก่อนหน้านี้มาก แต่ฟังก์ชัน matrix3d() สามารถใช้เมทริกซ์ขนาด 4 × 4 เพื่ออธิบายการแปลงสามมิติ (3D) การดำเนินการแปลง 3D ทั้งหมดสามารถทำได้ในคราวเดียวผ่านฟังก์ชัน matrix3d() รูปแบบไวยากรณ์ของฟังก์ชันจะเป็นดังนี้:
matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)
คำอธิบายพารามิเตอร์มีดังนี้:
a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4: ใช้เพื่ออธิบายการแปลง 3D ต่างๆ
a4, b4, c4: ระบุจำนวนการเปลี่ยนแปลงองค์ประกอบ
ตัวอย่าง:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Document</title><style>.box1{perspective:500px;}.box{position:relative;width:200px;height:200px;margin:100pxauto;transition:all2s;/*ปล่อยให้กล่องย่อยคงไว้ สภาพแวดล้อมของอวกาศ 3 มิติ*/transform-style:preserve-3d;}.box:hover{transform:rotatey(60deg);}.boxdiv{position:absolute;top:0;left:0;width:100%;height:100 %; สีพื้นหลัง: สีชมพู;}.boxdiv:last-child{สีพื้นหลัง:อะความารีน;เปลี่ยน:rotateX(60deg);}</style></head><body><div><div><div> </ div><div></div></div></div></body></html>ผลการวิ่ง:
