CSS3 Dönüştürme özelliği 2 ve 3 boyutlu dönüştürme özelliği olmak üzere ikiye ayrılıyor. Daha önce 2 Boyutlu Dönüştürme özelliklerini incelemiştik. Bu makalede 3 Boyutlu Dönüştürme işlemlerini inceleyeceğiz. Bu konular daha çok örnek yapıp pekiştirilecek konular, ancak ilk başta teorisini öğrenmek gerektiğini düşünüyorum.

2 boyutlu dönüştürme özelliklerine göre daha az tarayıcı desteğine sahip olan bu özellikler, zamanla daha çok yer kazanacaktır.

3 Boyutlu dönüşüm özelliklerinin tanımına girmeden biraz web’de 3. boyutu biraz irdelemekte yarar var. Web mecrasın hep 2 boyutlu düzlem üzerinde çalıştı. Tüm özellikler iki boyutlu düzlem için geliştirildi genişlik, yükseklik tanımları örnek olarak verilebilir. Bir başka örnek konumlandırma özelliklerinden verilebilir. Konumlandırma tanımları sol(left), sağ(right), üst(top) ve alt(bottom) olarak kullanılmaktadır.

z-index tanımında anlattığımız gibi 3. boyut kavramında girdiğimizde z-ekseni tanımını göz önünde bulundurmamız gerekiyor.

z-index

Şeklinde çizdiğimiz z-ekseni bize 3. boyutu göstermektedir.

3 Boyutlu Dönüşüm özelliklerini inceleyelim.

Dönüşüm Stili(transform-style) Özelliği

3 Boyutlu dönüşüm özelliklerinden ilk inceleyeceğimiz özellik dönüşüm stili olarak tanımlayacağımız özellik transform-style. Eğer dönüşüm uygulanan elemanın alt elemanlarınada 3. boyutu uygulayacak iseniz bu özelliğin preserve-3d tanımını  kullanmalısınız. Bunun anlamı alt elemanlar kapsayıcı eleman gibi 3. boyutu davransın demektir.

Yapısı : transform-style: keyword;
Aldığı Değerler : [ flat | preserve-3d ]
Başlangıç değeri: flat
Uygulanabilen elementler: Blok-level ve satıriçi elementler
Kalıtsallık: Yok

http://unformedbuilding.com/demo/2012/css-transforms/3d/3d-transform-style.html

3 Boyutlu Dönüşüm Fonksiyonları

2 Boyutlu dönüşümü tanımlarken kullandığımız transform özelliği 3 Boyutlu tanımlarımız içinde geçerlidir. Farklı olan 3. boyutun fonksiyonlarıdır.

  • perspective
  • translateX, translateY, translateZ, translate3d
  • matrix3d
  • rotateX, rotateY, rotateZ, rotate3d
  • scaleX, scaleY, scaleZ, scale3d

2 Boyutlu dönüştürme özelliklerine z-ekseni eklenmiş özelliklerdir.

Bakış Açısı(perspective)

Perspective özelliği elemanların görüntüsünün bakış açısını değiştirmek(derinlik hissi) için kullanılır. perspective özelliği 3 Boyutlu Dönüştürme işlemleri için önemli bir özelliktir. perspective özelliği kolay kullanımı vardır, tabi karışık yapılı  alanlardaki kullanımı hariç.

“Perspektif, nesnelerin görünümünü 3 boyutlu olarak düz bir yüzeyde, yani 2 boyuta indirgeyerek, göstermeye yarayan bir iz düşüm tekniğidir. Yani, teknik bir çizimdir. Perspektif çizimde, nesnenin gözlemciye göre olan pozisyonunun ve uzaklığının etkileri esas alınarak çizim yapılır. Söz konusu çizimler gözlemcide, biçim ve orantı bakımından, renklerden bağımsız olarak, 3 boyutlu bir gerçeklik izlenimi yaratır.” - wikipedia.org

div {
    transform: perspective(derinlik);
}

Derinlik değeri bir uzunluğu(px olarak) veya none değerlerini alır.

Yapısı : transform: perspective(derinlik) Aldığı Değerler :none | **Başlangıç değeri:** none **Uygulanabilen elementler:** Blok-level ve satır içi elemanlar **Kalıtsallık:** Yok

Derinlik hissini anlamak için aşağıdaki örneklere bir göz atın. İlk kodumuz normal perspective ataması olmayan bir kutu

transform: translate(0px, 0px, -200px);

İkinci sağdaki kutu ise perspective uygulanmış kutu;

transform: perspective(500px) translate3d(0px, 0px, -200px);

Bir örnek daha yaparak ile pekiştirelim.

soldaki kutu

transform: rotatey(30deg);

sağdaki kutu

transform: perspective(300px) rotatey(30deg);

Perspektifi anlamak için güzel bir örnek ryancollins.me/?p=993

translateX, translateY, translateZ, translate3d

translateX ve translateY tanımlarını dha önce 2 boyutlu Dönüştürme özelliklerinde incelemiştik. Şimdi de translateZ ve üçünü bir arada kullanabildiğimiz translate3d kullanımlarını göreceğiz.

translateZ değeri z-ekseninde elemanı hareket ettirmeye yarar. Yüzde değeri almaz.

div {
    transform: translateZ(uzunluk);
}

Uzunluk değeri bir sayıdır. Perspective özelliğini anlatırken verdiğimiz ilk örnekte bu özelliğe değinmiştik.

translate3d tanımı 3 ekseninde aynı anda tanımını sağlamamızı sağlayan bir kısaltmadır.

translate3d(x, y, z)

Bir örnek kod yazarsak

 div {
    transform: translate3d(20px, 60px, 30px);
}

Görünümü konumlandırma ile sağlayabilirdik ancak buradaki izometrik hissi transitions ve animasyon uygulamalarında daha çok ön plana çıkacaktır.

scaleX, scaleY, scaleZ, scale3d

2 boyutlu dönüştürmede bahsettiğimiz gibi scale özelliği elemanları büyütmek veya küçültmek için kullanılır. scaleX ve scaleY değerlerini daha önce görmüştük. Burada scaleZ ve scale3d özelliklerini tanımlayacağız.

- scaleZ

div {
    transform: scaleZ(number);
}

scaleZ tanımı biraz farklı davranır. Dönüşüm uygulanmış elemanlarda büyültme veya küçültme işlemi 3 boyutlu eksen yapmak mümkün değil. Burada yaptığımız daha çok 3 boyutlu eksende 2 boyutlu görüntü elde etmektir. Bundan dolayı scaleZ değeri translateZ, rotate veya perspective değerlerinin bir ile kullanmak daha anlamlı olacaktır.

div {
    transform: perspective(500px) scaleZ(2) rotateX(45deg);
}

Yıldız savaşları filmindeki yazılara benzer bir görüntü elde ediyoruz.

- scale3d

scale3d özelliği tüm scale özelliklerini bir tanımda toplayan bir kısaltmadır.

scale3d(x, y, z)

rotateX, rotateY, rotateZ ve rotate3d

İki boyutlu düzlemde rotate değeritek tanım ile yetinilirken 3 boyutlu düzlemde 3 adet rotate tanımı yapmak gerekir. Bundan dolayı rotateX, rotateY ve rotateZ tanımları 3 boyutlu düzlemde döndürme işlemleri için tanımlanmıştır.

Tanımların sayısı üçe çıksa da tanımlar 2 boyutlu tanım ile aynıdır. Negatif değer alabilirler.

- rotateX

rotateX(<açı>)

rotateX tanımı ile verilen açı değeri kadar saat yönünde elemanı x-ekseninde çevirmeye yarar.

Yatay eksende elemanımız orta noktasından 45 derece saat yönünde eğilmiştir.

- rotateY

rotateY(<açı>)

rotateY tanımı ile verilen açı değeri kadar saat yönünde elemanı y-ekseninde çevirmeye yarar.

Dikey eksende elemanımız orta noktasından 45 derece saat yönünde eğilmiştir.

- rotateZ

rotateZ(<açı>)

rotateZ tanımı ile verilen açı değeri kadar saat yönünde elemanı z-ekseninde çevirmeye yarar.

z-ekseninde elemanımız orta noktasından 45 derece saat yönünde eğilmiştir.

- rotate3d

rotate3d(<rakam>, <rakam>, <rakam>,<açı>)

rotate3d özelliği saat yönünde 3 boyutlu döndürme işlemi yapar. Son değer açı değerini verirken ilk üç değer vektörel tabanlı rakamlar olarak tanımlanır. Başlangıç değeri 0,0,0 olarak tanımlıdır. Rakamlar Kartezyen koordinat sistemi’ne göre değer alır. Ben bu rakamlara pek takılmayalım diyorum, çevrimiçi araçlar ile bu işi halledebiliriz gibime geliyor.

İpucu:Japon makaledeki örnek hoşuma gitti göz atmakta yarar var. http://unformedbuilding.com/demo/2012/css-transforms/3d/3d-rotatexyz.html

matrix3d

matrix3d fonksiyonu tek elden 3 boyutlu dönüşüm yapmamıza olanak sağlamak amacıyla oluşturulan 4x4 bir matrisi olan 16 değerli bir özelliktir.

Bana biraz karışık gelen bir durum. Programatik olarak 3 boyutlu dönüşümleri yapmaya yarayan bir fonksiyon olarak tanımlayabilirim.

div {
transform: matrix3d( m01,m02,m03,m04, m05,m06,m07,m08,m09,m10,m11,m12, m13,m14,m15,m16);
}

Bu araç ile matrix3d daha kullanışlı oluyor.

perspective-origin

perspektif özelliği ile birlikte kullanılır, elemanın görüntülenen bakış açısının orijin noktasını değiştirmemizi sağlar. Elemanın perspektif görüntüsünün açısını değiştirir. x ve y değerleri alır. Başlangıç değeri kapsayıcının orta noktası olan 50% 50%’dir.

perspective-origin

x-değeri sol(left), sağ(right) ve orta(center) değerlerini alır. y-değeri üst(top), alt(bottom) ve orta(center) değerleri alır. Yüzde değerleri de alır.

Bu durumu şöyle düşünebiliriz; bir kameramız olsun baktığımız alana farklı bir açıdan bakmak istediğimizde perspektif orijinimizi değiştiriyoruz.

perspective-origin

http://unformedbuilding.com/demo/2012/css-transforms/3d/3d-perspective-origin.html

transform-origin

Dönüşümün orjin olarak nereye referans alacağını tanımlamamızı sağlar.

2 boyutlu dönüştürmede bahsettiğimiz bu özellik 3 boyutlu dönüşümde benzer bir kullanımı var ek olarak z-ekseni tanımıda eklenmektedir.

transform-origin: x,y,z;

z tanımı z-eksenindeki mesafeyi belirtmemiz için kullanılmaktadır.

http://unformedbuilding.com/demo/2012/css-transforms/3d/3d-transform-origin.html

backface-visibility

Bu özellik 3 boyutlu elemanın arkasının gösterilip gösterilmeyeceğini belirliyor. visibility özelliği gibi işliyor. hidden ve visible değerlerini alıyor.

Carousel örneğinde bu özelliği daha iyi anlarız.

figure{
    -webkit-backface-visibility:visible;
    -moz-backface-visibility:visible;
    -ms-backface-visibility:visible;
    -o-backface-visibility:visible;
    backface-visibility:visible;
}

Carousel örneğinde

figure{
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
}

Carousel örneğinde

Yukarıda görüldüğü gibi ilk resimde elemanların arkası görünürken ikinci resimde gizlenmiştir.

Tarayıcı Desteği

Yeni nesil tarayıcıların dahi son zamanlarda desteklediği 3 boyutlu dönüşüm özellikleri, sessiz tarayıcı güncellemeleri sayesinde Firefox, Chrome’un tam desteğine kavuştu. Aynı şeyi İnternet Explorer için söyleyemiyoruz maalesef. İnternet Explorer henüz yayınlanmayan 10. sürümünden itibaren destekliyor.

Tarayıcı Destekleme Listesi Firefox 12+ (-moz- öneki ile) Chrome 12+ (-webkit- öneki ile) Safari 5.1+ (-webkit- öneki ile) Opera desteklemiyor İnternet Explorer 10+ (-ms- öneki ile) Mobil Tarayıcılar iOS Safari 3.2+ (-webkit- öneki ile) Opera Mobile desteklemiyor Android Browser 3.0+ (-webkit- öneki ile)

Tarayıcı Desteği

Chrome explorer Firefox
12+ (-webkit) 10+ (-ms) 12+ (-moz)

Mobil Tarayıcılar

Android Mobil Safari Chrome
3.0+ (-webkit) 3.2+ (-webkit) 36+

Kaynaklar

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.