3D ve CSS

bookmark_border Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Paul Kinlan

Giriş

3D, uzun süredir masaüstü uygulamalarının tekelindeydi. Son zamanlarda, yerel GPU hızlandırmasına erişebilen gelişmiş akıllı telefonların kullanıma sunulmasıyla birlikte 3D'ün neredeyse her yerde kullanıldığını görmeye başladık.

3D genellikle oyun oynamak veya bazı gelişmiş kullanıcı arayüzleri için kullanılır. Kullanıcı arayüzü öğelerine 3D efektler uygulamak için uygun bir modelin uygulama geliştiriciler için pratik bir çözüm haline gelmesi, WPF ve Silverlight'ta perspektif dönüştürme işlemlerinin kullanıma sunulmasına kadar gerçekleşmedi (sonuçta 3D tam olarak kolay değildir).

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üşüm Çalışma Taslağı, CSS 2D Dönüşüm Modeli'nin mantıklı bir uzantısıdır. 3D uzayda perspektifler, rotasyonlar ve dönüşümler gibi bazı ek özellikler sunar.

Daha önce hiç bu kadar kolay 3D arayüz oluşturamamıştı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ığı, sürükleyici 3D dünyalar oluşturmanıza olanak tanımak için tasarlanmadığı unutulmamalıdır.

Tarayıcı Desteği ve Donanım Hızlandırma

-webkit-perspective

-webkit-transform-3d

Bir tarayıcı 3D'yi "desteklese" bile donanım ve sürücü sınırlamaları nedeniyle 3D oluşturamayabilir. 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üşümler için destek olup olmadığını algılamak mümkün olsa da donanım hızlandırma olup olmadığını algılamak mümkün değildir. Donanım hızlandırma, bu özelliğin temel bileşenidir.

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ştururken 1.000'den yüksek değerler 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. Yalnızca rotasyon uygulanmamış basit bir iFrame görürsünüz. Tarayıcınız 3D dönüşümleri donanım hızlandırması olmadan destekliyorsa bu biraz tuhaf görünebilir.

Animasyon oluşturma

CSS3 3D dönüşümlerinin en sevdiğim özelliği, CSS Geçiş modülüyle çok güzel bir şekilde bağlantı kurmasıdır. CSS'de animasyon ve geçişleri tanımlamak kolaydır. Bunları 3D'ye uygulamak da istisna değildir.

3D perspektif uygulanmış öğeleri animasyonlu hale getirmek kolaydır. "Geçiş" stilini "dönüşüm" olarak ayarlayın, bir süre ve animasyon işlevi ekleyin. Bu tarihten sonra, "dönüşüm" stilinde yapılan tüm değişiklikler animasyonlu olarak uygulanır.

Önceki örnekleri, satır içi stiller yerine doküman stilleri kullanacak şekilde yeniden yapılandırdık. 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çiciyi kullanarak, fareyi öğenin üzerine getirerek geçişler başlatabilirsiniz. Mükemmel!

Özet

Bu, CSS 3D dönüşümleri kullanılarak görünür DOM öğelerine uygulanabilecek harika efektlerden bazılarına kısa bir bakıştı. Bu eğitimde ele alınmayan, yapılabilir birçok şey daha var.