Giriş
3D, uzun zamandır masaüstü uygulamalarının muhafazası olmuştur. Yakın zamanda, yerel GPU hızlandırma özelliğine erişimi olan gelişmiş akıllı telefonların kullanıma sunulmasıyla birlikte, 3D'nin neredeyse her yerde kullanıldığını görmeye başladık.
3D genellikle oyun amaçlı veya bazı gelişmiş kullanıcı arayüzleri için kullanılan bir cihazdır. WPF ve Silverlight'ta Perspective dönüşümlerinin kullanıma sunulmasına kadar, kullanıcı arayüzü öğelerine 3D efektleri uygulamak için uygun bir modelin uygulama geliştiricileri için pratik bir çözüm haline gelmesi hiç de kolay olmamıştı.
CSS 3D Dönüşüm Modeli, uygulama yazarlarının herhangi bir görsel DOM öğesine 3D perspektif dönüşümleri uygulamasına olanak tanıyarak web geliştiricilerinin 3D'den yararlanan ilginç ve çekici kullanıcı arayüzleri oluşturmasına olanak tanımak için Mart 2009'da bir Taslak spesifikasyonu olarak kullanıma sunulmuştur.
CSS 3D Dönüştürme Çalışma Taslağı, CSS 2D Dönüşüm Modeli'nin mantıksal bir uzantısıdır ve 3D alanda perspektifler, döndürmeler ve dönüştürmeler gibi bazı ekstra özellikler sunar.
Daha önce hiç bu kadar kolay bir şekilde 3D arayüz oluşturamadık. Bu teknolojiler, pazara girişin önündeki engelleri kaldırdı. 3 boyutlu öğeler oluşturmak için artık matematikçi olmanıza gerek yok.
CSS 3D modülünün, geliştiricilerin zengin ve görsel açıdan ilgi çekici uygulamalar oluşturmasına yardımcı olmak için tasarlandığını, ancak sizi içine çeken 3D dünyalar geliştirmenizi sağlayacak şekilde tasarlanmadığını belirtmek isteriz.
Tarayıcı Desteği ve Donanım Hızlandırma
-webkit-perspektifi
-webkit-transform-3d
Unutulmaması gereken önemli bir bilgi, tarayıcı 3d'yi "desteklese" ancak donanım ve sürücü sınırlamaları nedeniyle 3D'yi görüntüleyemeyebileceğidir. DOM'ye dayalı 3D sahneler işlem açısından çok pahalı olabilir ve bu nedenle tarayıcı satıcıları tarayıcıları bir yazılım oluşturma çözümüyle yavaşlatmak yerine tüm platformlarda bulunmayabilecek GPU'dan faydalanmaya karar vermiştir.
Özellik Algılama
Özellik algılamada durum nedir? Bunu sormayacağınızı umuyordum. Geliştiriciler, belirli tarayıcı özelliklerine ve yeteneklerine yönelik desteği tespit etmek için Modernizr gibi araçlar kullanmaktadır. 3D dönüşüm desteği olup olmadığını tespit etmek mümkün olsa da donanım hızlandırmasının mevcut olup olmadığı tespit edilemez ve temel bileşen, donanım hızlandırmadır.
Temel Örnek
Hemen başlamaktan daha iyi bir şey yoktur. Bu örnekte, rastgele bir DOM öğesinin temel rotasyon grubunu uygulayacağız.
Kök öğe ile ilgili bir perspektif tanımlayarak başlayacağız.
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
Perspektif, 3D sahnenin derinliğinin nasıl oluşturulduğunu tanımladığı için önemlidir, 1-1000 arasındaki değerler çok belirgin bir efekt oluşturur ve 1.000'den daha az değerler verir. Daha sonra bir iframe ekleriz ve Z ve Y eksenlerinin etrafında 30 derecelik bir dönüş uygularız
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
BAM! Yani, bu öğe tamamen etkileşimlidir ve her açıdan tam kapsamlı bir DOM öğesidir (ancak artık daha da güzel görünmesini sağlar). Tarayıcınız 3D dönüşümleri desteklemiyorsa hiçbir şey olmaz. Yalnızca, rotasyon uygulanmayan basit bir iframe görürsünüz. Tarayıcınız 3D dönüşümleri destekliyorsa ancak donanım hızlandırması yoksa biraz tuhaf görünebilir.
Animasyonlar
CSS3 3D dönüşümlerinin en sevdiğim yanı, CSS Geçiş modülüyle mükemmel bir şekilde uyuşması. Animasyonları ve geçişleri CSS'de tanımlamak kolaydır ve bunları 3D'ye uygulamak da istisna değildir.
3D perspektif uygulanmış öğelere animasyon eklemek kolaydır. Bunun için "geçiş" stilini "dönüştürme" olarak ayarlamanız, bir süre ve animasyon işlevi eklemeniz yeterlidir. Bu tarihten itibaren "tranform" stilinde yapılan her değişiklik animasyonlu hale gelecektir.
Satır içi stiller yerine doküman stillerini kullanmak için önceki örnekleri yeniden düzenledik. Örneği netleştirmenin yanı sıra örneğin sözde :hover seçicisinden yararlanmasına da olanak tanır. :hover seçicisi kullanıldığında geçişler, fareyi öğenin üzerine getirerek başlatılabilir. Mükemmel!
Özet
Bu videoda, CSS 3D dönüşümleri kullanılarak görünür DOM öğelerine uygulanabilecek bazı etkileyici efektlere hızlıca göz attık. Yine de, bu eğiticide ele alınmayan birçok şey yapılabilir.