Bu sayfa, Cloud Translation API ile çevrilmiştir.

3D ve CSS

Paul Kinlan

Giriş

3D, uzun süredir masaüstü uygulamalarının tekelindeydi. 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 için cihaz veya bazı gelişmiş kullanıcı arayüzleri için kullanılı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, web geliştiricilerin uygulama yazarlarının herhangi bir görsel DOM öğesine 3D perspektif dönüşümleri uygulamasını sağlayarak 3D'den yararlanan ilgi çekici ve etkileyici kullanıcı arayüzleri oluşturmasına olanak tanımak için Mart 2009'da taslak spesifikasyon 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, giriş engelini azaltmıştır. Artık 3D öğeler oluşturmak için matematik konusunda uzman olmanız gerekmiyor.

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

Tarayıcı desteği

Kaynak

-webkit-transform-3d

Tarayıcı desteği

Kaynak

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 tabanlı 3D sahneler çok pahalı olabilir. Bu nedenle tarayıcı tedarikçileri, tarayıcıları saf bir yazılım oluşturma çözümüyle yavaşlatmak yerine tüm platformlarda kullanılamayabilecek GPU'dan yararlanmaya karar verdi.

Özellik Algılama

Özellik algılama ne olacak? Bunu sormayacağınızı umuyordum. Geliştiriciler, belirli tarayıcı özelliklerine ve özelliklerine verilen desteği tespit etmek için Modernizr gibi araçları kullanıyor. 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 öğesine temel bir dönme grubu uygulayacağız.

Kök öğeyle ilgili bir perspektif tanımlayarak başlarız.

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

Perspektif, 3D sahnenin derinliğinin nasıl oluşturulacağını tanımladığı için önemlidir. 1 ila 1.000 arasındaki değerler çok belirgin bir etki oluşturur, 1.000'den yüksek değerler ise daha az belirgin bir etki oluşturur. Ardından bir iframe ekleyerek Z ve Y ekseni etrafında 30 derecelik bir rotasyon uygularız.

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

BAM! Bu kadar. Öğe tamamen etkileşimli ve her açıdan tam teşekküllü bir DOM öğesidir (artık daha da havalı görünmesi dışında). Tarayıcınız 3D dönüşümleri desteklemiyorsa hiçbir şey olmaz. Döndürme uygulanmamış basit bir iFrame görürsünüz. Tarayıcınız 3D dönüşümleri destekliyorsa ancak donanım hızlandırması yoksa bu 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ı. CSS'de animasyon ve geçişleri tanımlamak kolaydır. Bunları 3D'ye uygulamak da bu kuralın istisnası 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 sonra, "dönüşüm" stilinde yapılan tüm değişiklikler animasyonlu olarak uygulanır.

Satır içi stiller yerine doküman stillerini kullanmak için önceki örnekleri yeniden düzenledik. Bu, örneğin netleşmesini sağlamanın yanı sıra örneğin :hover sözde seçicisinden yararlanmasına 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.