Perspective() değeri

Bu aralar yoğunluğumdan dolayı konuyu anlatma fırsatını bir türlü bulamadım. Kendi hazırladığım örneklerin önizlemesi için kullandığım temayı değiştirip yerine Wordpress özel alanlar kullanarak hazırladığım bir kaç parçalık yeni bir tema tasarladım.  Buna tasarlamak demek pek doğru olmaz sanırım. Sonuçta önizleme penceresi, detay-download butonları ve sonraki demo-önceki demo şeklinde  bir kaç tane bölümden oluşuyor. Hala düzenlemem gereken yüzlerce yazı var o bölümde. Nedense yaptıklarım hep böyle yarım yamalak kalıyorlar. Neyse ki perspective değerini anlatmak için biraz zaman bulabildim. Bu konu da bittikten sonra ardından Css3 ile gelen bir diğer özellik olan transitions (geçişler) özelliğini anlatacağım ayrıntılı örneklerle birlikte. Bir nesneye 3D görüntü vermek için kullanılan en önemli öğelerden birisidir ve diğer transform değerleri ile beraber kullanıldığında ortaya çok güzel çalışmalar çıkarılabilir. Geçen bir anlatımda rotate değerini anlatmıştık ve perspective kullanılmadan rotate ile hazırlanmış olan örneklerin 3B görünümlü olmadığından bahsetmiştik. Eğer bir tasarımın daha gerçekçi görünmesini istiyorsak bu değeri kullanmak zorundayız.

Rotate ile perspective kullanımı:

Alttaki örnekte rotateX ve  rotateY değerlerini ile bir örnek hazırladık. Normalde bu değer ile yan yatan kutuların yakın olan kısmı büyük ve uzak olan kısmı da küçük olarak görünmez. Bu üç boyutlu görüntüyü sağlayan perspective değeridir. 900 piksel olarak bir ayar verdik. Siz bu ayarı küçülttüğünüzde yakın olan kenarlar gittikçe daha fazla büyüme gösterir ve uzak olan kenarlar da daha fazla küçülme gösterir. Gördüğünüz gibi mouse kutuların üzerine geldiği anda kutularımız olduğu yerde X ve Y çizgilerinde yan yatıyorlar. Kimi zaman oldukları yerden değil de bir kapı açılması gibi en dipten dönmesine ihtiyaç duyarız. Ortadan değil de en sağ köşeden, en sol köşeden veya tam tersi olarak alttan ve üstten katlanmasını sağlamak istiyorsak eğer transform-origin özelliğini kullanmamız gerekiyor.