จุดกำเนิดการแปลงและมุมมอง

โดยค่าเริ่มต้น การแปลงจะเกิดขึ้นรอบจุดกึ่งกลางขององค์ประกอบ: 50% 50% คุณสมบัติ transform-origin ใช้เปลี่ยนจุดหมุนนี้

รองรับคีย์เวิร์ด เปอร์เซ็นต์ หรือค่าความยาว รูปแบบคือ x-axis y-axis z-axis

ปรับขนาดจากมุมซ้ายบน ซึ่งเหมาะสำหรับภาพเคลื่อนไหวการขยายเมนูดรอปดาวน์:

หมุนเข็มนาฬิการอบฐานของเข็ม:

perspective กำหนดระยะห่างระหว่างผู้ใช้กับระนาบ z=0 สำหรับการแปลง 3 มิติ ค่าที่เล็กกว่าจะสร้างการบิดเบือนของมุมมองที่เด่นชัดกว่า ส่วนค่าที่ใหญ่กว่าจะสร้างความลึกแบบละเอียดอ่อน

เปลี่ยนจุดรวมสายตาของมุมมอง ค่าเริ่มต้นคือจุดกึ่งกลาง (50% 50%)

perspective() สามารถใช้เป็นฟังก์ชันการแปลงกับองค์ประกอบนั้นเองได้ด้วย ไม่ใช่กับองค์ประกอบแม่ วิธีนี้จะจำกัดบริบท 3 มิติไว้เฉพาะองค์ประกอบนั้น

โดยค่าเริ่มต้น การแปลง 3 มิติขององค์ประกอบลูกจะถูกทำให้แบนราบเป็น 2 มิติ ให้กำหนด transform-style: preserve-3d บนองค์ประกอบแม่ เพื่อคงตำแหน่ง 3 มิติจริงขององค์ประกอบลูกไว้

การ์ดพลิกแบบคลาสสิกโดยใช้ perspective และ preserve-3d:

backface-visibility: hidden ซ่อนด้านหลังขององค์ประกอบที่ผ่านการแปลง 3 มิติ ซึ่งจำเป็นสำหรับการ์ดพลิกที่ไม่ควรมองเห็นด้านหลังผ่านด้านหน้า

เอฟเฟกต์เอียงสามิติเมื่อวางเคอร์เซอร์ ซึ่งตอบสนองต่อตำแหน่งของเคอร์เซอร์:

เมนูดรอปดาวน์ใช้ transform: scaleY(0) เพื่อซ่อน และใช้ scaleY(1) เพื่อแสดง ควรใช้ transform-origin ใดเพื่อให้เมนูขยายลงด้านล่างจากด้านบน

transform-origin เปลี่ยนจุดหมุนสำหรับการหมุนและการปรับขนาด ซึ่งสำคัญอย่างยิ่งต่อการขยายเมนูดรอปดาวน์ การหมุนเข็มนาฬิกา และการเอียงเมื่อวางเคอร์เซอร์ การกำหนด perspective บนองค์ประกอบแม่จะสร้างบริบทความลึก 3 มิติ transform-style: preserve-3d ช่วยให้องค์ประกอบ 3 มิติซ้อนกันทำงานได้ backface-visibility: hidden ซ่อนด้านหลังขององค์ประกอบในเอฟเฟกต์การพลิก