เกริ่นนำ
3D เป็นการเก็บแอปพลิเคชันบนเดสก์ท็อปมาเป็นเวลานาน เมื่อเร็วๆ นี้ มีการเปิดตัวสมาร์ทโฟนขั้นสูงที่มีสิทธิ์เข้าถึงการเร่งความเร็ว GPU แบบดั้งเดิม เราจึงเริ่มเห็นว่ามีการใช้ภาพ 3 มิติในเกือบทุกที่
โดยปกติ 3 มิติจะใช้เป็นอุปกรณ์สำหรับเล่นเกมหรืออินเทอร์เฟซผู้ใช้ขั้นสูงบางอย่างเป็นหลัก จนกระทั่งไม่ได้มีการเปิดตัว Perspective Transforms ใน WPF และ Silverlight ว่าโมเดลที่เหมาะสมสำหรับการนำเอฟเฟกต์ 3 มิติไปใช้กับองค์ประกอบของอินเทอร์เฟซผู้ใช้ได้กลายมาเป็นโซลูชันที่ใช้ได้จริงสำหรับนักพัฒนาแอปพลิเคชัน (หลังจากที่ 3D นั้นไม่ง่ายนัก)
โมเดลการเปลี่ยนรูปแบบ 3 มิติของ CSS เปิดตัวเป็นข้อกำหนดฉบับร่างในเดือนมีนาคม 2009 เพื่อให้นักพัฒนาเว็บสร้างอินเทอร์เฟซผู้ใช้ที่น่าสนใจและน่าสนใจ ซึ่งใช้ประโยชน์จาก 3 มิติโดยช่วยให้ผู้เขียนแอปพลิเคชันใช้การแปลงมุมมอง 3 มิติกับองค์ประกอบ DOM ที่เป็นภาพใดๆ ได้
แบบร่างการเปลี่ยนรูปแบบ 3 มิติของ CSS เป็นส่วนขยายเชิงตรรกะของโมเดลการเปลี่ยนรูปแบบ 2 มิติของ CSS โดยนำเสนอคุณสมบัติเพิ่มเติมบางอย่าง รวมถึงมุมมอง การหมุน และการเปลี่ยนรูปแบบในพื้นที่ 3 มิติ
ไม่เคยมีมาก่อนที่เราสามารถสร้างอินเทอร์เฟซแบบ 3 มิติได้อย่างง่ายดาย เทคโนโลยีเหล่านี้ช่วยลดอุปสรรคในการเข้าใช้งาน คุณไม่ต้องเป็นเซียนทางคณิตศาสตร์ในการสร้างองค์ประกอบ 3 มิติอีกต่อไปแล้ว
โปรดทราบว่าโมดูล CSS 3D ได้รับการออกแบบมาเพื่อช่วยนักพัฒนาซอฟต์แวร์สร้างแอปพลิเคชันที่สมบูรณ์และน่าสนใจ แต่ไม่ได้ออกแบบมาเพื่อช่วยให้คุณสร้างโลก 3 มิติที่สมจริง
การรองรับเบราว์เซอร์และการเร่งฮาร์ดแวร์
มุมมอง-webkit
-webkit-transform-3d
สิ่งสำคัญที่ควรทราบคือ แม้ว่าเบราว์เซอร์อาจ "สนับสนุน" แบบ 3 มิติ แต่อาจไม่สามารถแสดงแบบ 3 มิติได้เนื่องจากข้อจำกัดของฮาร์ดแวร์และไดรเวอร์ ฉาก 3 มิติที่มาจาก DOM อาจมีค่าใช้จ่ายสูงในการคำนวณ ผู้ให้บริการเบราว์เซอร์จึงตัดสินใจมากกว่าที่จะลดความเร็วเบราว์เซอร์ด้วยโซลูชันการแสดงผลซอฟต์แวร์เพียงอย่างเดียว แต่จะใช้ประโยชน์จาก GPU ซึ่งอาจไม่พร้อมใช้งานในบางแพลตฟอร์ม
การตรวจหาฟีเจอร์
แล้วการตรวจหาฟีเจอร์ล่ะ หวังว่าคุณคงไม่ถามนะ นักพัฒนาซอฟต์แวร์ได้ใช้เครื่องมือต่างๆ เช่น Modernizr เพื่อตรวจหาการรองรับฟีเจอร์และความสามารถที่เฉพาะเจาะจงของเบราว์เซอร์ แม้ว่าคุณจะสามารถตรวจพบการสนับสนุนการแปลงภาพ 3 มิติได้ แต่ก็ไม่สามารถตรวจหาการเร่งฮาร์ดแวร์ได้ และการเร่งฮาร์ดแวร์เป็นองค์ประกอบสำคัญ
ตัวอย่างพื้นฐาน
ไม่มีสิ่งใดจะดีไปกว่าการกระโดดเข้าข้างตัวเอง ในตัวอย่างนี้ เราจะใช้ชุดการหมุนเวียนพื้นฐานขององค์ประกอบ DOM ที่กำหนดเอง
เราเริ่มต้นด้วยการกำหนดมุมมองขององค์ประกอบราก
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
มุมมองมีความสำคัญเนื่องจากจะกำหนดความลึกของฉาก 3 มิติ ค่าตั้งแต่ 1-1000 จะให้ผลลัพธ์ที่ชัดเจนมาก และมีค่าน้อยกว่า 1,000 ดังนั้นเราจะเพิ่ม iframe และใช้การหมุน 30 องศารอบแกน Z และ Y
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
แบม! กล่าวคือ องค์ประกอบเป็นแบบอินเทอร์แอกทีฟเต็มรูปแบบ และเป็นองค์ประกอบ DOM ที่มีการพัฒนาอย่างสมบูรณ์ (ยกเว้นว่าตอนนี้ดูเท่ขึ้นไปอีก) หากเบราว์เซอร์ไม่รองรับการเปลี่ยนรูปแบบ 3 มิติ ก็จะไม่มีอะไรเกิดขึ้น คุณจะเห็นเพียง iframe แบบง่ายที่ไม่มีการใช้การหมุน หากเบราว์เซอร์ของคุณรองรับการแปลงเป็น 3 มิติ แต่ไม่มีการเร่งฮาร์ดแวร์ ก็อาจดูแปลกๆ ไปสักหน่อย
การสร้างภาพเคลื่อนไหว
สิ่งที่ผมชอบเกี่ยวกับการแปลงรูปแบบ 3 มิติ CSS3 คือมันสามารถเชื่อมโยงกับโมดูลการเปลี่ยน CSS ได้อย่างสวยงาม ภาพเคลื่อนไหวและการเปลี่ยนภาพนั้นกำหนดได้ง่ายๆ ใน CSS และการนำไปใช้กับ 3D ก็ไม่มีข้อยกเว้น
การสร้างภาพเคลื่อนไหวให้กับองค์ประกอบที่ใช้มุมมอง 3 มิตินั้นทำได้ง่ายๆ เพียงตั้งค่ารูปแบบ "การเปลี่ยน" เป็น "เปลี่ยนรูปแบบ" แนบระยะเวลาและฟังก์ชันภาพเคลื่อนไหว หลังจากนั้น การเปลี่ยนแปลงใดๆ ก็ตามในรูปแบบ "การเปลี่ยนรูปแบบ" จะเป็นภาพเคลื่อนไหว
เราได้แยกโครงสร้างตัวอย่างก่อนหน้านี้ไปใช้รูปแบบเอกสาร แทนรูปแบบแทรกในบรรทัด วิธีนี้ไม่เพียงแต่ทำให้ตัวอย่างชัดเจนขึ้นเท่านั้น แต่ยังทำให้ตัวอย่างใช้ประโยชน์จากตัวเลือกเทียม :hover ได้อีกด้วย เมื่อใช้ตัวเลือก :hover คุณจะเริ่มต้นการเปลี่ยนได้ง่ายๆ โดยวางเมาส์เหนือองค์ประกอบ ยอดเยี่ยม
สรุป
นี่เป็นเพียงการดูคร่าวๆ เกี่ยวกับเอฟเฟกต์เจ๋งๆ บางส่วนที่นำไปใช้กับองค์ประกอบ DOM ที่มองเห็นได้โดยใช้การแปลงแบบ 3 มิติของ CSS ยังมีอีกหลายสิ่งที่คุณทำได้ที่ยังไม่ได้กล่าวถึงในบทแนะนำนี้