Giriş
3B uzun bir süredir masaüstü uygulamaları olarak kullanılmaktadır. Son zamanlarda, yerel GPU hızlandırmaya 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 cihazı veya bazı gelişmiş kullanıcı arayüzleri için kullanılır. WPF ve Silverlight'ta Perspektif dönüşümlerinin kullanıma girmesine kadar, kullanıcı arayüzü öğelerine 3D efektler uygulamak için uygun bir model, uygulama geliştiricileri için pratik bir çözüm haline gelmedi (ne de olsa 3D tam olarak kolay değildi).
CSS 3D Dönüşüm Modeli, uygulama yazarlarının herhangi bir görsel DOM öğesine 3D perspektif dönüştürmeleri uygulamasına olanak tanıyarak web geliştiricilerinin 3B'den yararlanan ilgi çekici ve etkileyici kullanıcı arayüzleri oluşturmalarına olanak tanımak için Mart 2009'da Taslak spesifikasyonu olarak kullanıma sunulmuştur.
CSS 3D Dönüşüm Ç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 3D arayüzler oluşturamamıştık. Bu teknolojiler, pazarın önündeki engeli ortadan kaldırdı. Artık 3D öğeler oluşturmak için matematik uzmanı 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 üzere tasarlandığını, etkileyici 3D dünyalar oluşturmanızı sağlayacak şekilde tasarlanmadığını belirtmemiz gerekir.
Tarayıcı Desteği ve Donanım Hızlandırma
-webkit-perspektif
-webkit-transform-3d
Unutulmaması gereken önemli bir bilgi, bir tarayıcının 3D'yi "desteklese de" donanım ve sürücü sınırlamaları nedeniyle 3D'yi işleyemeyebileceğidir. DOM'ye dayalı 3D sahneler işlem açısından çok pahalı olabilir. Bu nedenle tarayıcı satıcıları, sadece yazılım oluşturma çözümüyle tarayıcıları yavaşlatmak yerine, tüm platformlarda bulunmayan GPU'dan yararlanmayı tercih etmeye karar verdi.
Özellik Algılama
Özellik algılama ne olacak? Bunu sormayacağını umuyordum. Geliştiriciler belirli tarayıcı özellikleri ve yeteneklerinin desteğini tespit etmek için Modernizr gibi araçları kullanıyorlar. 3D dönüştürme desteği olup olmadığını tespit etmek mümkün olsa da, donanım hızlandırma olup olmadığını tespit etmek mümkün değildir ve en önemli unsur donanım hızlandırmasıdır.
Temel Örnek
Hemen işe koyulmaktan daha iyisi yoktur. Bu örnekte, rastgele bir DOM öğesinin temel rotasyon grubunu uygulayacağız.
Kök öğe hakkında bir bakış açısı tanımlayarak işe başlarız.
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
Perspektif önemlidir çünkü 3D sahne derinliğinin nasıl oluşturulduğunu tanımlar, 1-1000 arasındaki değerler çok belirgin bir etki yaratır ve 1000'in üzerindeki değerler de o kadar belirgindir. Daha sonra, bir iç çerçeve ekler ve Z ve Y eksenlerine 30 derecelik bir döndürme uygularız.
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
BAM! Yani, öğe tamamen etkileşimlidir ve her açıdan tam donanımlı bir DOM öğesidir (ancak artık daha da iyi görünür). 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 donanım hızlandırması yoksa bu biraz tuhaf görünebilir.
Animasyonlu
CSS3 3D dönüşümlerinin sevdiğim yanı, CSS Geçiş modülüne mükemmel bir şekilde uyması. Animasyonları ve geçişleri CSS'de tanımlamak kolaydır. Bunların 3D'ye uygulanması da bu konuda istisna değildir.
3D perspektif uygulanmış öğeleri canlandırmak kolaydır. Bunun için "geçiş" stilini "dönüştürme" olarak ayarlamanız, süre ve animasyon işlevi eklemeniz yeterlidir. O andan itibaren, "transform" stilinde yapılan değişiklikler animasyon eklenir.
Satır içi stiller yerine doküman stillerini kullanmak için önceki örnekleri yeniden düzenledik. Örneği açıklığa kavuşturmakla kalmaz, aynı zamanda örneğin :hover sözde seçicisinden yararlanmasını da sağlar. :hover seçici ile geçişleri başlatmak için fareyi öğenin üzerine getirmeniz yeterlidir. Mükemmel!
Özet
CSS 3D dönüşümleri kullanılarak görünür DOM öğelerine uygulanabilecek etkileyici efektlerden bazılarına kısa bir bakış sağladık. Bu eğitimde ele alınmayan, hâlâ yapılabilecek birçok şey vardır.