การTransformsและการย้ายตำแหน่งใน HTML5
ถูกรองรับใน firefox 3.5+, Opera 10.5, Webkit ตั้งแต่รู่น 3.2 หรือแม้แต่ Intrenet Explorer 9 พร็อปเพอร์ตี้ transforms ของ CSS3 ทำให้เราสามารถ ย้าย หมุน ปรับขนาด หรือบิดอิลิเมนต์ใดๆ ในหน้าเว็บได้ ขณะที่เอฟเฟ็กต์บางอย่างเหล่านี้อาจจะใช้ได้ใน CSS รุ่นก่อนๆ เช่น การกำหนดตำแหน่งแบบสัมพันธ์ และสัมบูรณ์) CSS3 ทำให้สามารถควบคุมสิ่งที่ไม่เคยทำได้มาก่อนในหลายๆ ด้านกับหน้าตาของอิลิเมนต์
การทรานส์ฟอร์ม
ถูกรองรับใน firefox 3.5+, Opera 10.5, Webkit ตั้งแต่รู่น 3.2 หรือแม้แต่ Intrenet Explorer 9 พร็อปเพอร์ตี้ transforms ของ CSS3 ทำให้เราสามารถ ย้าย หมุน ปรับขนาด หรือบิดอิลิเมนต์ใดๆ ในหน้าเว็บได้ ขณะที่เอฟเฟ็กต์บางอย่างเหล่านี้อาจจะใช้ได้ใน CSS รุ่นก่อนๆ เช่น การกำหนดตำแหน่งแบบสัมพันธ์ และสัมบูรณ์) CSS3 ทำให้สามารถควบคุมสิ่งที่ไม่เคยทำได้มาก่อนในหลายๆ ด้านกับหน้าตาของอิลิเมนต์
เราสามารถดำเนินการกับหน้าตาโดยใช้อิลิเมนต์ ชื่อ ฟังก์ชั่นทรานส์ฟอร์ม ค่าของพร็อปเพอร์ตี้ transform คือ ฟังก์ชั่นทรานฟอร์มหนึ่งหรือหลายฟังก์ชั่นที่คั่นด้วยช่องว่าง ซึ่งจะถูกใช้งานตามลำดับที่มันถูกกำหนดไว้
ดังตัวอย่างนี้
การย้ายตำแหน่ง
การย้ายตำแหน่งทำให้คุณสามารถเคลื่อนย้ายตำแหน่งอิลิเมนต์ไปทาง ซ้าย ขวา บนหรือล่าง ฟังก์ชั่นเหล่านี้มีการกระทำเหมือนและคล้ายกับ position: relative; ที่คุณต้องการประกาศ top และ left เมื่อคุณใช้งานการย้านตำแหน่ง คุณจะสามารถย้ายตำแหน่งของอิลิเมนต์ โดยไม่ส่งผลกระทบต่อการไหลของเอกสารเลย
ไอทีจีเนียส เอ็นจิเนียริ่ง ให้บริการด้านไอทีครบวงจร
ทั้งงานอบรม (Training) สัมมนา รับเขียนโปรแกรม เว็บไซต์ แอปพลิเคชัน งานออกแบบกราฟิก และงานด้าน E-Marketing ทั้ง SEO, PPC และ Social Media Marketing
ติดต่อเราเพื่อสอบถามผลิตภัณฑ์ ขอราคา หรือปรึกษาเรื่องไอทีได้เลยค่ะ
แนะนำหลักสูตรที่น่าสนใจ
HTML5 and Modern CSS
เบราว์เซอร์ทุกค่ายวันนี้รองรับความสามารถใหม่ของ HTML และ CSS ที่เมื่อก่อนต้องพึ่ง JavaScript หรือไลบรารีภายนอก ทั้งฟอร์มที่ตรวจข้อมูลได้เอง หน้าต่าง Dialog และ Popover เลือก Style จากสิ่งที่อยู่ข้างในด้วย :has() Component ที่ปรับขนาดตามพื้นที่จริงด้วย…
HTML5, CSS and Bootstrap 5
หน้าเว็บที่ดีต้องมีโครงสร้างถูกต้อง ใช้งานง่ายทั้งบนมือถือและคอมพิวเตอร์ และดูน่าสนใจ ความสามารถในตัวของ HTML5 และ CSS ทำได้มากกว่าที่หลายคนคิด ตั้งแต่ฟอร์มที่ตรวจข้อมูลเอง วิดีโอพร้อมคำบรรยาย ไปจนถึงเอฟเฟกต์ไล่สี เงา และการเคลื่อนไหว เมื่อนำมาใช้คู่กับ…