เครื่องสร้าง CSS Transform

คู่มือการแปลง CSS

การแปลง CSS จะเปลี่ยนตำแหน่ง ขนาด และการวางแนวขององค์ประกอบโดยไม่กระทบต่อการไหลของเอกสาร การหมุน ปรับขนาด แปล และเอียงสามารถรวมกันได้ในคุณสมบัติการแปลงเดียว และพวกมันเคลื่อนไหวได้อย่างราบรื่นด้วยการเปลี่ยน CSS

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

Pro Tips

• ลำดับมีความสำคัญในการเปลี่ยนแปลง แปลงร่าง: แปล(...) หมุน(...) ย้ายแล้วหมุน; หมุน(...) แปล(...) หมุนระบบพิกัดก่อน เพื่อให้ได้ผลลัพธ์ที่แตกต่างกัน
• รวมการแปลงเข้ากับการเปลี่ยนภาพเพื่อให้เอฟเฟกต์โฮเวอร์ราบรื่น: .card:hover { แปลง: สเกล (1.05); } พร้อมการเปลี่ยนแปลง: แปลง .2s; ในชั้นเรียนพื้นฐาน