บทช่วยสอน แปลง CSS3 2D ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ CSS3 แปลง,มันทำงานอย่างไร?,สนับสนุนเบราว์เซอร์,การแปลง 2D,ตัวอย่าง,แปล () วิธีการ,ตัวอย่าง,หมุน () วิธีการ,ตัวอย่าง,ขนาด () วิธีการ,ตัวอย่าง,เอียง () วิธีการ,ตัวอย่าง,เมทริกซ์ () วิธีการ,ตัวอย่าง,คุณสมบัติการแปลงใหม่,วิธีการแปลง 2D,

แปลง CSS3 2D

CSS3 แปลง

การเปลี่ยนแปลง CSS3 เราสามารถย้ายปรับขนาดในการเปิดหมุนและองค์ประกอบยืด

มันทำงานอย่างไร?

ผลกระทบของการเปลี่ยนแปลงเพื่อให้องค์ประกอบที่จะเปลี่ยนรูปร่างขนาดและตำแหน่ง

คุณสามารถแปลง 2D หรือ 3D องค์ประกอบของคุณ

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน

ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก

Internet Explorer 10, Firefox, Opera และสนับสนุนการเปลี่ยนสถานที่ให้บริการ

Chrome และ Safari ต้องรุ่นคำนำหน้า -webkit-

หมายเหตุ: Internet Explorer 9 ต้องรุ่นคำนำหน้า -ms-

การแปลง 2D

ในบทนี้คุณจะได้เรียนรู้วิธีการแปลง 2D:

• แปล ()
• หมุน ()
• ขนาด ()
• เอียง ()
• เมทริกซ์ ()

ในบทต่อไปที่คุณจะได้เรียนรู้การแปลง 3D

ตัวอย่าง

div { เปลี่ยน: หมุน (30 องศา) - MS-เปลี่ยน: หมุน (30 องศา) ; / * IE 9 * / - WebKit-เปลี่ยน: หมุน (30 องศา) ; / * Safari และ Chrome * / }

ลอง»

แปล () วิธีการ

แปล () วิธีการตามไปทางซ้าย (แกน X) และด้านบน (แกน Y) ตำแหน่งของพารามิเตอร์ที่กำหนดให้ย้ายจากตำแหน่งปัจจุบันขององค์ประกอบ

ตัวอย่าง

div { เปลี่ยน: แปล (50 พิกเซล 100 พิกเซล) - MS-เปลี่ยน: แปล (50 พิกเซล 100 พิกเซล) ; / * IE 9 * / - WebKit-เปลี่ยน: แปล (50 พิกเซล 100 พิกเซล) ; / * Safari และ Chrome * / }

ลอง»

แปลค่า (50px, 100px) เป็นองค์ประกอบมือถือ 50 พิกเซลจากด้านซ้ายและย้าย 100 พิกเซลจากด้านบน

หมุน () วิธีการ

หมุน () วิธีการในจำนวนที่กำหนดขององศาในการหมุนตามเข็มนาฬิกาขององค์ประกอบ เป็นค่าลบจะได้รับอนุญาตนี้เป็นหมุนทวนเข็มนาฬิกาขององค์ประกอบ

ตัวอย่าง

div { เปลี่ยน: หมุน (30 องศา) - MS-เปลี่ยน: หมุน (30 องศา) ; / * IE 9 * / - WebKit-เปลี่ยน: หมุน (30 องศา) ; / * Safari และ Chrome * / }

ลอง»

หมุนค่า (30deg) องค์ประกอบหมุน 30 องศาตามเข็มนาฬิกา

ขนาด () วิธีการ

ขนาด () วิธีการที่เพิ่มหรือลดขนาดขององค์ประกอบขึ้นอยู่กับความกว้าง (แกน X) และความสูง (แกน Y) พารามิเตอร์:

ตัวอย่าง

-ms-เปลี่ยน: โย (2,3) ; / * IE 9 * / -webkit-เปลี่ยน: โย (2,3); / * Safari * / เปลี่ยน: โย (2,3); / * ไวยากรณ์มาตรฐาน * /

ลอง»

ขนาด (2,3) ความกว้างของการเปลี่ยนแปลงเป็นสองเท่าของขนาดเดิมและสามเท่าของความสูงเดิม

เอียง () วิธีการ

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

ตัวอย่าง

div { เปลี่ยน: เอียง (30 องศา, 20 องศา) - MS-เปลี่ยน: เอียง (30 องศา, 20 องศา) ; / * IE 9 * / - WebKit-เปลี่ยน: เอียง (30 องศา, 20 องศา) ; / * Safari และ Chrome * / }

ลอง»

เอียง (30deg, 20deg) เป็นองค์ประกอบของแกน X และแกน Y ประมาณ 20 องศาประมาณ 30 องศา

เมทริกซ์ () วิธีการ

เมทริกซ์ () วิธีการและวิธีการแปลง 2D รวมเข้าเป็นหนึ่ง

วิธีเมทริกซ์มีหกพารามิเตอร์รวมทั้งการหมุนปรับย้าย (แพน) และฟังก์ชั่เอียง

ตัวอย่าง

การใช้งานของแมทริกซ์ () วิธีการหมุนส่วน div 30 °

div { เปลี่ยน: เมทริกซ์ (0.866, 0.5, - 0.5, 0.866, 0, 0) - MS-เปลี่ยน: เมทริกซ์ ( 0.866, 0.5 - 0.5, 0.866, 0, 0) ; / * IE 9 * / - WebKit-เปลี่ยน: เมทริกซ์ (0.866, 0.5 - 0.5, 0.866, 0, 0) ; / * Safari และ Chrome * / }

ลอง»

คุณสมบัติการแปลงใหม่

ต่อไปนี้เป็นรายการของคุณสมบัติการแปลงทั้งหมด:

วิธีการแปลง 2D