10 โปรเจ็กต์ 3D อันน่าทึ่งที่สร้างขึ้นด้วย CSS & JavaScript

เว็บมาไกลจากอินเทอร์เน็ตผ่านสายโทรศัพท์และหน้า GeoCities ขณะนี้เว็บไซต์มีการตอบสนองอย่างสมบูรณ์และสามารถเข้าถึงได้จากอุปกรณ์หน้าจอสัมผัส แต่เบราว์เซอร์สมัยใหม่ได้นำสิ่งต่าง ๆ ไปไกลกว่าการออกแบบเว็บ "กระแสหลัก"

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

กล่องมุมมอง

เชื่อหรือไม่ว่าอนิเมชั่นกล่องนี้สร้างด้วยการแปลง CSS3 ล้วนๆ คิวบ์จริงนั้นค่อนข้างง่ายในการเรนเดอร์โดยใช้ CSS และสีที่สลับกันได้กับคลาสที่ต่างกัน

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

กราฟ CSS3 บริสุทธิ์

อีกตัวอย่างหนึ่งของแอนิเมชั่น CSS3 ล้วนๆ คือกราฟแท่งที่สร้างโดย Ana Tudor มันใช้คอนเทนเนอร์ HTML อย่างง่ายที่มี div ภายในสี่ตัวที่แสดงด้านทั้งสี่ของสี่เหลี่ยมแต่ละอัน

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

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

วิสัยทัศน์อุโมงค์

สำหรับประสบการณ์เบราว์เซอร์ Webkit ที่น่าใช้ ลองดูอุโมงค์ 3 มิติที่สร้างขึ้นด้วยการแปลง CSS3 และคุณสมบัติ Sass บางส่วน

การสลับสีทำงานผ่าน Sass for loop ซึ่งจะสลับค่าสี HSL หลังจากช่วงระยะเวลาหนึ่ง การวนซ้ำนี้ทำให้เกิดภาพลวงตาว่าคุณกำลังเดินทางผ่านอุโมงค์ลูกปาหลากสีสันอย่างไม่มีกำหนด ค่อนข้างป่า!

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

3D iPhone ใน CSS

iPhone 4 นำเสนอการออกแบบใหม่อย่างสิ้นเชิง และทำให้ทุกคนตื่นเต้นกับสมาร์ทโฟนตัวใหม่ของนักฆ่า Jonathan Levaillant ผู้พัฒนาต้องชอบ iPhone 4 มากแน่ๆ เพราะเขาสร้างการออกแบบใหม่ใน CSS ล้วนๆ

เป็นอุปกรณ์ที่หมุนได้เครื่องนี้ค่อนข้างเจ๋ง ดูเหมือน iPhone และแถบด้านนอกสะท้อนแสงด้วยการไล่ระดับสีที่สมจริง หน้าจอของ iPhone เล่นวิดีโอ mp4 ที่โฮสต์บนเซิร์ฟเวอร์ของ Apple และยังบิดเบือนมุมมองอย่างเหมาะสม

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

ระบบสุริยะ 3 มิติ

ทางช้างเผือกเป็นมุมเล็กๆ ของเราในจักรวาล และแสดงให้เห็นอย่างเต็มที่ในปากกาอันน่าทึ่งนี้ซึ่งสร้างโดย Julian Garnier

มันใช้ CSS จำนวนมาก แต่เอฟเฟกต์ที่ปรับแต่งได้ส่วนใหญ่นั้นอาศัย JavaScript ซึ่งจะทำให้คุณสามารถเปลี่ยนความเร็ว ขนาด และระยะทางของดาวเคราะห์ต่างๆ ได้

คุณยังสามารถสลับระหว่างมุมมอง 3D และมุมมอง 2D ด้านบนได้อย่างง่ายดาย พูดคุยเกี่ยวกับการใช้การพัฒนาส่วนหน้าเป็นตัวเอก!

ก้อนสีเทา

ลูกบาศก์สีเทาธรรมดาเหล่านี้อาจดูเหมือนไม่มากนัก พวกมันสร้างขึ้นใน CSS และหมุนบนแกนเดียวโดยอัตโนมัติโดยใช้ภาพเคลื่อนไหว CSS3

แต่มีการตั้งค่าแบบโต้ตอบซึ่งคุณสามารถทำให้ลูกบาศก์เคลื่อนไหวได้เมื่อวางเมาส์ไว้ นี่เป็นเคล็ดลับที่ยอดเยี่ยมและต้องใช้เทคนิค CSS ที่หายากสองสามอย่าง :hover และ :checked pseudo-classes พร้อมกับ tilde(~) selector

CSS 3D Carousel

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

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

JavaScript เดียวที่จำเป็นในที่นี้คือสลับไปมาระหว่างปุ่มถัดไป/ก่อนหน้า และทำให้สไตล์ 3D เคลื่อนไหวเข้าที่ และนี่คือสิ่งที่คุณสามารถใช้บนไซต์จริงได้ ดังนั้นจึงอาจมีประโยชน์ในการออกแบบเว็บสมัยใหม่

Chill the Lion

นี่คือสิ่งที่ใช้งานได้จริงน้อยกว่าเล็กน้อย แต่ก็ยังสนุกกับการใช้อย่างเหลือเชื่อ การแสดงสิงโต 3 มิติโดย Karim Maaloul ใช้ Three.js เพื่อสร้างเกมสนุก ๆ ที่คุณสามารถเป่าลมเย็น ๆ ลงบนสิงโตที่ขับเหงื่อได้

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

นักพัฒนายังไปไกลถึงขั้นสร้างพื้นที่กระพือปีกในแผงคอของสิงโตพร้อมกับการเคลื่อนไหวในหนวดเครา

นี่เป็นอีกตัวอย่างหนึ่งที่มีรายละเอียดว่าเอฟเฟกต์ 3D มาไกลแค่ไหน

ตัวควบคุม 3D NES

เกมคลาสสิกทิ้งร่องรอยไว้ที่ coders รุ่นปัจจุบัน และคุณสามารถเห็นสิ่งนี้ได้ด้วยคอนโทรลเลอร์ 3D NES ของ Johan van Tongeren ที่เรนเดอร์ใน CSS3 ล้วนๆ

ทำงานได้ดีที่สุดในเบราว์เซอร์ Chrome/WebKit แม้ว่าจะแสดงผลได้ดีใน Firefox ด้วย เป็นการทดลองมากกว่าจริงๆ เพื่อดูว่า CSS มาไกลแค่ไหน ดังนั้นอย่าคาดหวังว่ามันจะสมบูรณ์แบบ!

Kepler Orbits

ฉันไม่สามารถจินตนาการได้ว่าต้องใช้เวลานานแค่ไหนในการสร้างแบบจำลองเส้นทางโคจรของเคปเลอร์ที่เหมือนจริงนี้ โมเดลนี้แสดงการเคลื่อนไหวของร่างกายที่สัมพันธ์กับวัตถุอื่นในอวกาศ และในกรณีนี้ ผู้พัฒนา Danie Clawson ทำหน้าที่ได้อย่างยอดเยี่ยม

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

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

ฉันหวังว่าตัวอย่างเหล่านี้จะสร้างแรงบันดาลใจให้คุณเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาส่วนหน้า และอาจถึงขั้นสร้างโครงการ 3 มิติของคุณเอง