3D และ CSS

Paul Kinlan

บทนำ

3 มิติเป็นเทคโนโลยีที่สงวนไว้สำหรับแอปพลิเคชันบนเดสก์ท็อปมาอย่างยาวนาน เมื่อเร็วๆ นี้ เราได้เริ่มเห็นการใช้ 3 มิติเกือบทุกที่ด้วยการเปิดตัวสมาร์ทโฟนขั้นสูงที่มีสิทธิ์เข้าถึงการเร่งความเร็ว GPU ในตัว

โดยทั่วไป 3 มิติจะใช้เป็นอุปกรณ์เล่นเกมหรืออินเทอร์เฟซผู้ใช้ขั้นสูงเป็นหลัก จนกระทั่งมีการเปิดตัวการเปลี่ยนรูปแบบตามมุมมองใน WPF และ Silverlight โมเดลที่เหมาะสมสำหรับการใช้เอฟเฟกต์ 3 มิติกับองค์ประกอบอินเทอร์เฟซผู้ใช้จึงกลายเป็นโซลูชันที่ใช้งานได้จริงสำหรับนักพัฒนาแอปพลิเคชัน (เพราะ 3 มิตินั้นใช้งานยากอยู่ดี)

รูปแบบการเปลี่ยนรูปแบบ 3 มิติของ CSS เปิดตัวเป็นข้อกำหนดฉบับร่างในเดือนมีนาคม 2009 เพื่อให้นักพัฒนาเว็บสร้างอินเทอร์เฟซผู้ใช้ที่น่าสนใจและดึงดูดใจซึ่งใช้ประโยชน์จาก 3 มิติได้ โดยอนุญาตให้ผู้เขียนแอปพลิเคชันใช้การเปลี่ยนรูปแบบด้วยมุมมอง 3 มิติกับองค์ประกอบ DOM ที่เป็นภาพ

ฉบับร่างการทํางานของการเปลี่ยนรูปแบบ 3 มิติของ CSS เป็นส่วนขยายที่สมเหตุสมผลของรูปแบบการเปลี่ยนรูปแบบ 2 มิติของ CSS ซึ่งจะนําเสนอคุณสมบัติเพิ่มเติมบางอย่าง เช่น มุมมอง การหมุน และการเปลี่ยนรูปแบบในพื้นที่ 3 มิติ

เราไม่เคยสร้างอินเทอร์เฟซ 3 มิติได้ง่ายขนาดนี้มาก่อน เทคโนโลยีเหล่านี้ช่วยลดอุปสรรคในการเริ่มต้นใช้งาน คุณไม่จำเป็นต้องเป็นอัจฉริยะทางคณิตศาสตร์เพื่อสร้างองค์ประกอบ 3 มิติอีกต่อไป

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

การรองรับเบราว์เซอร์และการเร่งฮาร์ดแวร์

-webkit-perspective

การรองรับเบราว์เซอร์

• 36
• 12
• 16
• 9

แหล่งที่มา

-webkit-transform-3d

การรองรับเบราว์เซอร์

• 2
• 12
• 49
• 4

แหล่งที่มา

ข้อมูลสำคัญที่ต้องจำไว้คือ แม้ว่าเบราว์เซอร์จะ "รองรับ" 3 มิติ แต่อาจไม่สามารถแสดงผล 3 มิติได้เนื่องจากข้อจำกัดของฮาร์ดแวร์และไดรเวอร์ ฉาก 3 มิติที่อิงตาม DOM อาจใช้การประมวลผลอย่างหนักหน่วง ผู้ให้บริการเบราว์เซอร์จึงตัดสินใจที่จะใช้ประโยชน์จาก GPU ซึ่งอาจไม่พร้อมใช้งานในบางแพลตฟอร์มแทนที่จะทําให้เบราว์เซอร์ช้าลงด้วยโซลูชันการแสดงผลซอฟต์แวร์ล้วนๆ

การตรวจหาองค์ประกอบ

แล้วการตรวจหาองค์ประกอบล่ะ เราหวังว่าคุณจะไม่ได้ถาม นักพัฒนาซอฟต์แวร์ใช้เครื่องมืออย่าง Modernizr เพื่อตรวจหาการรองรับฟีเจอร์และความสามารถบางอย่างของเบราว์เซอร์ แม้ว่าจะตรวจหาการรองรับการเปลี่ยนรูปแบบ 3 มิติได้ แต่ระบบไม่สามารถตรวจหาการเร่งฮาร์ดแวร์ได้ ซึ่งการเร่งฮาร์ดแวร์เป็นองค์ประกอบสำคัญ

ตัวอย่างพื้นฐาน

ไม่มีอะไรจะดีไปกว่าการก้าวเข้ามาทันที ในตัวอย่างนี้ เราจะใช้ชุดการหมุนพื้นฐานขององค์ประกอบ DOM ที่กำหนดเอง

เราเริ่มต้นด้วยการกําหนดมุมมองในองค์ประกอบรูท

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

มุมมองเป็นสิ่งสำคัญเนื่องจากกำหนดวิธีแสดงผลความลึกของฉาก 3 มิติ ค่าตั้งแต่ 1-1, 000 จะทำให้เกิดเอฟเฟกต์ที่ชัดเจนมาก และค่าที่มากกว่า 1, 000 จะทำให้เกิดเอฟเฟกต์ที่ชัดเจนน้อยลง จากนั้นเราจะเพิ่ม iframe และใช้การหมุน 30 องศารอบแกน Z และ Y

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

BAM! กล่าวคือ องค์ประกอบนี้จะมีการโต้ตอบเต็มรูปแบบ และในทุกๆ ด้านก็จะเป็นองค์ประกอบ DOM ที่สมบูรณ์ (ยกเว้นว่าตอนนี้ดูเจ๋งขึ้นกว่าเดิม) หากเบราว์เซอร์ไม่รองรับการเปลี่ยนรูปแบบ 3 มิติ ไม่มีอะไรจะเกิดขึ้น คุณจะเห็นเฉพาะ iframe ธรรมดาที่ไม่มีการใช้การหมุน หากเบราว์เซอร์รองรับการเปลี่ยนรูปแบบ 3 มิติแต่ไม่มีการเร่งฮาร์ดแวร์ รูปภาพอาจดูแปลกๆ เล็กน้อย

กำลังเคลื่อนไหว

สิ่งที่ฉันชอบเกี่ยวกับการเปลี่ยนรูปแบบ 3 มิติของ CSS3 คือมันเข้าคู่กับโมดูลการเปลี่ยนรูปแบบ CSS ได้อย่างลงตัว ภาพเคลื่อนไหวและการเปลี่ยนเฟรมนั้นกำหนดใน CSS ได้ง่าย และการใช้กับโมเดล 3 มิติก็เช่นกัน

การทำองค์ประกอบที่มีการใช้มุมมอง 3 มิติให้เคลื่อนไหวนั้นง่ายมาก เพียงตั้งค่าสไตล์ "transition" เป็น "transform" แล้วแนบระยะเวลาและฟังก์ชันภาพเคลื่อนไหว จากนั้นการเปลี่ยนแปลงสไตล์ "เปลี่ยนรูปแบบ" จะเป็นภาพเคลื่อนไหว

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

สรุป

นี่เป็นเพียงดูคร่าวๆ เกี่ยวกับเอฟเฟกต์เจ๋งๆ บางอย่างที่สามารถนำไปใช้กับองค์ประกอบ DOM ที่มองเห็นได้โดยใช้การแปลง CSS 3 มิติ ยังมีอีกหลายอย่างที่ทำได้ซึ่งไม่ได้กล่าวถึงในบทแนะนำนี้