แปลง 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