css perspective+tranform

#พื้นฐานการเขียนเว็ปไซต์

#perspective #tranform

#CSS

CSS Perspective เป็นคุณสมบัติที่ใช้ในการสร้างพื้นที่ 3 มิติให้กับองค์ประกอบในเว็บเพจ โดยกำหนดระยะห่างของผู้ชมจากวัตถุ ทำให้องค์ประกอบต่างๆ ที่ถูกแปลง (เช่น การหมุน) แสดงผลออกมาเหมือนจริงเหมือนกับสิ่งที่ตาเรามองเห็นในชีวิตจริง เช่น วัตถุที่อยู่ใกล้จะดูใหญ่กว่าวัตถุที่อยู่ไกล และมีผลต่อความลึกของภาพรวม ยิ่งค่า perspective น้อย วัตถุจะยิ่งดูใหญ่ขึ้นและเหมือนอยู่ใกล้ตาเรามากขึ้น ทำให้เห็นมิติ 3 มิติได้ชัดเจนขึ้น. 

หลักการทำงานของ Perspective

สร้างพื้นที่ 3 มิติ:

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

กำหนดระยะห่าง:

ค่าของ perspective คือระยะห่างจากผู้ใช้ไปยังระนาบ Z (Z-plane) ที่วัตถุอยู่. 

ผลต่อการมองเห็น:

ค่าน้อย: ทำให้วัตถุดูใหญ่ขึ้นเมื่ออยู่ใกล้ และมีมิติที่ดูโดดเด่นชัดเจนขึ้น. 

ค่ามาก: เอฟเฟกต์ความลึกจะดูละเอียดอ่อนมากขึ้น วัตถุจะดูแบนราบลง. 

ประยุกต์ใช้กับ Transform:

perspective มักใช้ร่วมกับคุณสมบัติ CSS อื่นๆ เช่น transform: rotateY() เพื่อสร้างภาพลวงตาของวัตถุ 3 มิติที่หมุนได้. 

ความแตกต่างระหว่าง perspective และ transform: perspective() 

perspective (คุณสมบัติ):

ใช้กับ Element หลัก (Parent Element) เพื่อสร้างพื้นที่ 3 มิติร่วมกันสำหรับ Element ลูกที่ถูกแปลงทั้งหมด.

transform: perspective() (ฟังก์ชัน):

ใช้โดยตรงกับ Element ที่จะถูกแปลง เพื่อกำหนดความลึกของวัตถุนั้นๆ โดยตรง.

ตัวอย่างการใช้งาน

โค้ด

/* กำหนดพื้นที่ 3 มิติให้กับคอนเทนเนอร์ */ .container { perspective: 1000px; /* กำหนดระยะห่างของผู้ใช้ */ }

/* แปลงองค์ประกอบลูกให้หมุนและมีมิติ */ .child-element { transform: rotateY(30deg); /* ตัวอย่างการหมุนองค์ประกอบ */

}