Tamamen CSS ve JavaScript ile Oluşturulmuş 10 Çarpıcı 3D Proje

Web, çevirmeli İnternet ve GeoCities sayfalarından çok yol kat etti. Web siteleri artık tamamen duyarlı ve dokunmatik ekranlı cihazlardan erişilebilir. Ancak modern tarayıcılar, işleri "ana akım" web tasarımının daha da ötesine taşıdı.

Yalnızca ön uç teknolojilerini kullanarak tarayıcıda harika 3B efektler oluşturmak mümkündür. Ve bu yazıda, web'in birkaç on yıl içinde ne kadar ilerlediğini gösteren favori 3D web projelerimi sergileyeceğim.

Perspektif Kutuları

İster inanın ister inanmayın bu kutu animasyonu saf CSS3 dönüşümleriyle yapıldı. Gerçek küpleri CSS kullanarak oluşturmak oldukça kolaydır ve değişen renkler farklı sınıflarla çalışır.

Animasyon, bu kutuların 3B alanda zıpladığı yanılsamasını vermek için döngüsel ana kare animasyonlarını kullanır. Sağ üst köşedeki perspektif düğmelerinden herhangi birine tıklayarak bu 3D modeli farklı açılardan bile görüntüleyebilirsiniz. Oldukça havalı!

Saf CSS3 Grafiği

Saf CSS3 animasyonunun bir başka örneği, Ana Tudor tarafından oluşturulan bu çubuk grafiktir. Her dikdörtgenin dört tarafını temsil eden dört iç div içeren basit bir HTML kabı kullanır.

Çubuklar, CSS3 kullanarak canlandırmak için yeterince kolaydır ve hepsi değişen yüksekliklere kadar büyür. Ancak en etkileyici kısım, tüm bu animasyonun çubuk grafik büyürken bile görüş açılarını nasıl döndürdüğü.

Bu, hesaplama işlevleriyle animasyonları otomatikleştirmek için çok fazla Sass kodu kullanır, bu nedenle biraz tekniktir. Ancak 3D hakkında daha fazla şey öğrenmeye çalışıyorsanız, o zaman bu, dalmak için sağlam bir kalemdir.

Tünel Vizyonu

Keyifli bir Webkit tarayıcı deneyimi için, yalnızca bazı CSS3 dönüşümleri ve Sass özellikleriyle oluşturulan bu 3B tünele bir göz atın.

Değişen renkler, belirli bir süre sonra HSL renk değerini değiştiren bir Sass for döngüsünden geçer. Bu döngüler, süresiz olarak renkli konfeti parçalarından oluşan bir tünelde seyahat ettiğiniz yanılsamasını verir. Oldukça vahşi!

Özel bir şey gibi görünmeyebilir ve büyük bir web sitesi için kesinlikle pratik değildir. Ancak biraz yaratıcılık ve kodlama bilgisi ile ne kadar çok şey yapabileceğinizin bir kanıtıdır.

CSS'de 3D iPhone

iPhone 4, kökten yeni bir tasarım sundu ve herkesi muhteşem yeni akıllı telefon için heyecanlandırdı. Geliştirici Jonathan Levaillant, tasarımı saf CSS'de yeniden yarattığına göre iPhone 4'ten gerçekten keyif almış olmalı.

Dönen cihazlar giderken bu oldukça havalı. Bir iPhone'a benziyor ve dış bant, gerçekçi bir gradyan ile ışığı bile yansıtıyor. iPhone'un ekranı, Apple'ın sunucularında barındırılan bir mp4 videosunu oynatır ve ayrıca perspektifte düzgün şekilde bozulur.

Bununla ilgili en çılgın olan şey, her şey için yalnızca CSS'ye dayanmasıdır. Saf CSS3 iPhone'lar tarayıcıda tamamen etkileşimli olduğunda 10 yıl sonra çok heyecanlanacağım.

3D Güneş Sistemi

Samanyolu, evrenin küçük köşemizdir ve Julian Garnier tarafından yaratılan bu muhteşem kalemde tam olarak temsil edilmektedir.

Çok fazla CSS kullanır, ancak özelleştirilebilir efektlerin çoğu JavaScript'e dayanır. Bu, çeşitli gezegenlerin hızını, boyutunu ve mesafesini değiştirmenizi sağlar.

Hatta 3B görünüm ile tepeden 2B görünüm arasında nispeten kolaylıkla geçiş yapabilirsiniz. Ön uç geliştirmenin yıldız kullanımı hakkında konuşun!

Gölgeli Küpler

Bu basit gölgeli küpler çok fazla görünmeyebilir. CSS'de yerleşiktirler ve CSS3 animasyonlarını kullanarak otomatik olarak tek eksende dönerler.

Ancak, fareyle üzerine gelindiğinde küpleri canlandırabileceğiniz etkileşimli bir ayar var. Bu kesinlikle harika bir numara ve :hover ve :checked sözde sınıfların yanı sıra tilde(~) selector de dahil olmak üzere birkaç nadir CSS tekniğine dayanıyor.

CSS 3D Atlıkarınca

Görüntü karuselleri grafikleri, fotoğrafları ve hatta videoları dönüşümlü olarak sergilemek için harikadır. Ve bu CSS3 atlıkarınca ile bu eğlenceli kaydırıcıları tamamen yeni bir düzeye çıkarabilirsiniz.

Bu çok basit 3B atlıkarınca, farklı öğeler arasında animasyon oluşturmak için tıklama olaylarına dayanır. 3D stili şaşırtıcı derecede ayrıntılıdır ve tamamen CSS koduna dayanır.

Burada gereken tek JavaScript, sonraki/önceki düğmeleri arasında geçiş yapmak ve 3B stilleri yerinde canlandırmaktır. Ve bu aslında gerçek bir sitede kullanabileceğiniz bir şey, bu yüzden modern web tasarımında pratik bir kullanımı olabilir.

Aslanı soğut

İşte biraz daha az pratik ama yine de kullanımı inanılmaz eğlenceli bir şey. Karim Maaloul'un bu 3D aslan görüntüsü, terli aslana biraz serin hava üfleyebileceğiniz eğlenceli bir oyun oluşturmak için Three.js'yi kullanıyor.

Fanı imlecinizle sayfada hareket ettirirken aslanın bakışları takip edecektir. Ardından, motorlu fanı çalıştırmak için tıklamanız ve yoluna serin bir hava akışı gönderirken aslanın heyecanını izlemeniz yeterlidir.

Geliştirici, bıyıklarda hareketle birlikte aslanın yelesinde çırpma alanları oluşturacak kadar ileri gitti.

Bu, 3D efektlerin ne kadar ilerlediğinin bir başka ayrıntılı örneğidir.

3D NES Denetleyici

Klasik oyun, mevcut kodlayıcı nesline damgasını vurdu ve bunu Johan van Tongeren'in saf CSS3'te oluşturulan 3D NES denetleyicisinde görebilirsiniz.

En iyi Chrome/WebKit tarayıcılarında çalışır, ancak Firefox'ta da iyi sonuç vermesi gerekir. CSS'nin ne kadar ilerlediğini görmek gerçekten daha çok bir deney, bu yüzden mükemmel olmasını beklemeyin!

Kepler Yörüngeleri

Kepler yörünge yolunun bu gerçekçi modelini oluşturmanın ne kadar sürdüğünü hayal edemiyorum. Bu model uzayda bir cismin diğerine göre hareketini gösteriyor ve bu durumda geliştirici Danie Clawson inanılmaz bir iş çıkardı.

Bu modelin tamamı görseller için CSS ve 3D efektler için Three.js kullanır. Sol üst köşede, nesnenin hızını, boyutunu ve yerleşimini etkilemek için yörünge değişkenlerinin çoğunu değiştirebileceğiniz bir seçenekler kutusu bulacaksınız.

Yörüngedeki nesnenin, hangi tarafın güneşe baktığına bağlı olarak gölgeleme ile gerçekçi ışık kullandığını bile fark edebilirsiniz. Bu son derece etkileyici ve detaylara gösterilen büyük özen nedeniyle bu listede 1 numaraya giriyor.

Umarım bu örnekler, ön uç geliştirme hakkında daha fazla bilgi edinmenize ve hatta kendi 3B projelerinizi oluşturmanıza ilham verebilir.