การแปลง 2D ใน CSS ช่วยให้เราสามารถดำเนินการเปลี่ยนแปลงพื้นฐานบางอย่างในพื้นที่สองมิติ เช่น การเคลื่อนย้าย การหมุน การปรับขนาด หรือการบิด ฯลฯ องค์ประกอบที่ถูกแปลงจะคล้ายกับองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอน และจะไม่ส่งผลกระทบต่อองค์ประกอบโดยรอบ แต่สามารถนำมารวมกันได้ โดยมีองค์ประกอบล้อมรอบทับซ้อนกัน ข้อแตกต่างคือองค์ประกอบที่แปลงแล้วจะยังคงใช้พื้นที่ก่อนการแปลงบนเพจ
ขอแนะนำการแปลง 2D:
1. ย้ายการแปล()
ตามพารามิเตอร์ที่กำหนดโดยตำแหน่งด้านซ้าย (แกน X) และด้านบน (แกน Y) การย้ายจากตำแหน่งองค์ประกอบปัจจุบันสามารถเปลี่ยนตำแหน่งขององค์ประกอบบนหน้าได้ เช่นเดียวกับการวางตำแหน่ง
1. ไวยากรณ์:
แปลงร่าง:แปล(x,y);
หรือจะเขียนแยกกันก็ได้
แปลงร่าง:translateX(n);แปลง:แปลY(n);
2. ประเด็นสำคัญ:
(1) กำหนดการเคลื่อนไหวในการแปลง 2D และย้ายองค์ประกอบไปตามแกน X และ Y
(2) ข้อได้เปรียบที่ใหญ่ที่สุดของการแปลคือ มันจะไม่ส่งผลกระทบต่อตำแหน่งขององค์ประกอบอื่นๆ
(3) เปอร์เซ็นต์ของการแปลนั้นสัมพันธ์กับการแปลองค์ประกอบของตัวเอง (50%, 50%);
(4) ไม่มีผลกับแท็กอินไลน์
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;สีพื้นหลัง:#CCC;transform:translate(100px,10px);}</style></head><body ><div></div></body></html>ผลการวิ่ง:
2. หมุน หมุน()
การหมุน () วิธีการหมุนองค์ประกอบตามเข็มนาฬิกาตามระดับที่กำหนด อนุญาตให้ใช้ค่าลบซึ่งทำให้องค์ประกอบหมุนทวนเข็มนาฬิกา
ไวยากรณ์: transfrom:rotate (ระดับการหมุน)
ประเด็นสำคัญ:
หมุน (องศา) มีหน่วยเป็นองศา ตัวอย่างเช่น หมุน (45 องศา);
ถ้ามุมเป็นบวก แสดงเป็นทวนเข็มนาฬิกา ถ้าเป็นลบ แสดงเป็นทวนเข็มนาฬิกา
ตามค่าเริ่มต้น จุดศูนย์กลางตามเข็มนาฬิกาคือจุดกึ่งกลางขององค์ประกอบ
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;สีพื้นหลัง:#CCC;margin:20px0px0px20px;transform:rotate(45deg);}</style></head> <body><div></div></body></html>ผลการวิ่ง:
3. จุดศูนย์กลางการเปลี่ยนแปลง 2D จุดกำเนิดการแปลง:
ไวยากรณ์:
เปลี่ยนต้นกำเนิด: xy;
ประเด็นสำคัญ:
(1) โปรดทราบว่า x และ y ถูกคั่นด้วยช่องว่าง
(2) จุดศูนย์กลางเริ่มต้นของ xy คือจุดศูนย์กลางขององค์ประกอบ (50% 50%)
(3) คุณยังสามารถตั้งค่าพิกเซลหรือคำนามทิศทางสำหรับ xy (ขวา ซ้าย กลาง ล่าง บน);
4. ระดับการซูม()
วิธีการ scale() ขนาดขององค์ประกอบจะเพิ่มขึ้นหรือลดลง ขึ้นอยู่กับพารามิเตอร์ความกว้าง (แกน X) และความสูง (แกน Y):
(1) แก้ไขขนาดขององค์ประกอบ ขยายหรือลดขนาดองค์ประกอบ
(2) ถ้าเป็นจำนวนลบก็จะกลับรายการ
(3) รูปแบบไวยากรณ์ของฟังก์ชันเป็นดังนี้:
ขนาด(sx,sy)
โดยที่ sx แทนอัตราส่วนมาตราส่วนในทิศทางแนวนอน และ sy แทนอัตราส่วนมาตราส่วนในทิศทางแนวตั้ง นอกจากนี้ พารามิเตอร์ sy สามารถละเว้นได้ และค่าเริ่มต้นจะเท่ากับ sx
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;สีพื้นหลัง:#CCC;transform:scale(0.7);}</style></head><body>< div></div></body></html>ผลการวิ่ง:
5. เอียง()
ประกอบด้วยค่าพารามิเตอร์สองค่า ซึ่งระบุมุมเอียงของแกน X และแกน Y ตามลำดับ หากพารามิเตอร์ตัวที่สองว่างเปล่า ค่าเริ่มต้นจะเป็น 0 พารามิเตอร์ลบหมายถึงการเอียงในทิศทางตรงกันข้าม
(1) skewX(<angle>) หมายถึงการเอียงเฉพาะในแกน X (ทิศทางแนวนอน)
(2) เอียง Y(<มุม>); หมายถึงการเอียงเฉพาะในแกน Y (ทิศทางแนวตั้ง)
(3) ทำให้องค์ประกอบเอียงไปในทิศทางที่ต่างกัน
(4) การเอียง(a) เท่ากับการเอียง(a,0)
(5)เอียง(x,y)
(6) องศามุมหน่วย
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;สีพื้นหลัง:#CCC;margin:20px0px0px10px;transform:skew(-15deg,20deg);}</style>< /หัว><body><div></div></body></html>ผลการวิ่ง:
6. เมทริกซ์()
ฟังก์ชัน matrix() ถือได้ว่าเป็นคำย่อของฟังก์ชันต่างๆ ได้แก่ skew(), scale(), หมุน() และ แปล() การดำเนินการแปลง 2D ทั้งหมดสามารถกำหนดได้พร้อมกันผ่านฟังก์ชัน matrix() รูปแบบไวยากรณ์ของฟังก์ชันเป็นดังนี้:
เมทริกซ์ (a, b, c, d, tx, ty)
พารามิเตอร์ทั้งหกในฟังก์ชัน matrix() สอดคล้องกับ scaleX() skewY() skewX() scaleY() TranslateX() และ TranslateY() ตามลำดับ คุณสามารถใช้เมทริกซ์() เพื่อดำเนินการแปลง 2D ต่างๆ ได้ , เช่น:
แปล(tx,ty)=เมทริกซ์(1,0,0,1,tx,ty);：
โดยที่ tx และ ty คือค่าการแปลแนวนอนและแนวตั้ง
หมุน(a)=เมทริกซ์(cos(a),sin(a),-sin(a),cos(a),0,0);
โดยที่ a คือค่าของระดับ คุณสามารถย้อนกลับการหมุนได้โดยการสลับค่า sin(a) และ -sin(a)
สเกล(sx,sy)=เมทริกซ์(sx,0,0,sy,0,0);
โดยที่ sx และ sy คือค่ามาตราส่วนแนวนอนและแนวตั้ง
เอียง(ขวาน,ay)=เมทริกซ์(1,ตาล(ay),ตาล(ay),1,0,0);
โดยที่ ax และ ay คือค่าแนวนอนและแนวตั้งในหน่วยองศา
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;พื้นหลัง-สี:#CCC;margin:20px0px0px10px;float:left;}.one{transform:matrix(0.866,0.5, -0.5,0.866,0,0);}.two{margin-left:35px;transform:matrix(0.586,0.8,-0.8,0.686,0,0);}.three{margin-left:40px;margin- ด้านบน:25px;transform:matrix(0.586,0.8,-0.8,0.866,0,0);}.four{transform:matrix(0.586,0.8,-0.8,0.586,40,30);}</style>< /head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four></div></body></html>ผลการวิ่ง:
วิธีการ matrix() และวิธีการแปลง 2D ถูกรวมเข้าด้วยกัน
วิธีเมทริกซ์มีพารามิเตอร์ 6 ตัว รวมถึงฟังก์ชันการหมุน การปรับขนาด การเคลื่อนไหว (การแปล) และการเอียง
ใช้เมทริกซ์เพื่อแสดงจำนวนการแปลงเมทริกซ์(a,b,c,d,x,y)
●acx
●บาย
●0 0 1
มาฝึกใช้กรณีเฉพาะกัน:
รหัสมีดังนี้:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>เอกสาร</title><style>body{margin:100px;}.transformElement{width:200px;height:200px;สีพื้นหลัง:red;transition:all1slinear;float:left;position:relative;left:0; สี:#FFF;/*transform-origin:lefttop;*/}.transformElement2{width:200px;height:200px;สีพื้นหลัง:blue;transition:all1slinear;float:left;}.transformElement:hover{/*transform :translate(200px,0)rotate(360deg)scale(2);*//*left:100px;*//*transform:scale(2,0.5)*/transform:skew(-45deg,45deg);}. นาฬิกา {width:400px;height:400px;border-radius:50%;สีพื้นหลัง:#Faa;position:relative;}.stick{width:4px;height:200px;สีพื้นหลัง:สีน้ำเงิน;ตำแหน่ง:สัมบูรณ์; ซ้าย:198px;ด้านบน:0;การเปลี่ยนผ่าน:all12slinear;เปลี่ยนต้นกำเนิด:centerbottom;}.stickshort{width:8px;height:100px;สีพื้นหลัง:rgb(142,21,248);ตำแหน่ง:สัมบูรณ์;ซ้าย:196px;ด้านบน :100px;transition:all12slinear;transform-origin:centerbottom;z-index:2;}.clock:hover.stick{transform:rotate(4320deg);}.clock:hover.stickshort{transform:rotate(360deg);} </style></head><body><!--<div></div><div></div>--><div><div></div><div></div>< /div></body></html>ผลการวิ่ง:
