Bir önceki yazımızda translate değerlerinin nasıl yapıldığını öğrenmiştik. Bu seferki yazımızda nesneleri ölçeklendirmeye yarayan diğer bir deyişle büyütmeye ve küçültmeye yarayan değeri öğreneceğiz. Css3 ile gelen yeni özelliklerden biri olan transform (dönüşümler) özelliği için kullanılan değerlerden bir tanesi de Scale değeridir. Hem 2B hem de 3B tasarımlar için kullanılan seçenekleri bulunuyor. Büyütme işlemi esnasında hem kutular hem de kutu içindeki nesneler büyüyüp küçülebiliyorlar. Daha açıklayıcı olması açısından her bir değer için bir kaç tane örnek ekledim. Bu örnekler ilk bakışta normal gibi görünürler. Mouse kutuların üzerine geldiğinde bu değerin nasıl çalıştığını ve normali ile arasındaki farkı görebileceksiniz.
Parantez içinde girilen ilk rakamlar X pozisyonunu (sağ ve sol), virgülden (,) sonra girilen rakamlar da Y pozisonunu (aşağı ve yukarı) gösterir. Bir nesnenin ölçeği 1 olarak değerlendirilir ve küçültmek istediğinizde 1 rakamından daha küçük bir rakam girmeniz gerekir 0.9, 0.8, 0.7… vs. Büyütmek istediğinizde ise 1 rakamından daha büyük bir sayı girmeniz gerekir 1.5, 2, 3, 3.5… vs. Eğer bir yönde bu değeri kullanmak istemiyorsanız parantez içinde default olarak 1 girmeniz gerekir.
Scale(x,y) kullanımı:
Aşağıdaki demoda iki adet kutu bulunuyor. Css :hover ile mouse kutuların üzerine geldiğinde bir tanesi X pozisyonunda küçülür diğeri de Y pozisyonunda küçülür. 0.9 derece küçültme değeri 10% kadar bir küçültme değerine eşittir.
Bu seferde 1 sayısından daha büyük bir rakam vererek her dört taraftan da büyütme değeri verelim. Birinci kutuya 1.1 ölçek olarak belirledim ikincisine de 1.2 ölçek olarak belirledim. Sonuç olarak soldaki kutu dört taraftan %10 büyüyecek ve sağdaki kutuda 20% oranında büyüyecek.
ScaleX(x) kullanımı:
Bu değer ile sadece x pozisyonuda (sağ-sol) büyütme ve küçültme işlemi yapılabiliyor. Birinci kutuya 1.5 değeri vererek yanlardan 50% büyümesini sağladık ve ikinci kutuya da 0.5 değeri vererek 50% küçülmesini sağladık. Nasıl çalıştığını görmek için mouse ile kutuların üzerinde gezinin.
ScaleY(y) kullanımı:
X ‘e göre tam tersi yönlerde büyütme için seçilen değerdir. Y pozisyonu aşağı-yukarı bütüme ve küçültmelerde kullanılır. Yine yukarıdaki örnekte olduğu gibi 1.5 ve 0.5 ölçek vererek 50% büyüme ve küçülme değeri verdik aşağıdaki kutulara.
ScaleZ(z) kullanımı:
ScaleZ değeri kendi başına hiç bir şeydir desek yeridir. 3D tasarımlar hazırlarken perspective veya rotate değerleri veya skew ile beraber kullanıldığında işe yarayabilir. Mesela perspective ve rotateX kulanarak 45 derecelik açıyla bir kutuyu (div) yatırdığınız zaman çerçevenin alt kısmı genişler ve üst kısmı da küçülür daha gerçekçi görünebilmesi için. Yan yatırdığınız kutuya bakarmış gibi bir görüntü ortaya çıkar bunlarla. Alt kısmın ve üst kısmın büyüme küçülme oranlarını belirlemek amacıyla scaleZ değerini kullanabiliyoruz.
Aşağıda verdiğimiz örnekte soldaki kutuya 1 ölçek ile yani normal görüntüsünde çerçeveyi taşmayacak şekilde ayarladık. Konunun başında da belirttiğim gibi 1 rakamı ile ölçeklendirilmiş kutular normal boylarında görünür. Sağdaki kutuya ise 1.5 ölçek değeri verdik. Böylelikle kutu 3D şeklinde yan yattığı zaman alt kısmı 50% genişleyecek ve üst kısmı da 50% daralacak. Vazgeçtim 1.5 ölçek ile tam belli olmuyor bu yüzden 2 olarak belirledim. Maksat aradaki farkı sizin daha iyi görebilmeniz 🙂
scale3d(x,y,z) kullanımı:
Ölçeklendirme ile alakalı son örneğimize geldi sıra. Sadece scaleZ bütün çalışmalar için yeterli olabilir mi diye düşünürken bu konuda açıklama yapmamak sanırım en iyisi. Sadece Z kullanarak sonuçta X, Y ve Z aynı anda yapılamıyor. scale3D(x,y,z) ile uzunluk, genişlik ve alt üst genişlikleri ayarlanabiliyor. Aynı anda işlendiğinde scaleZ değerinden farklı olarak elverişsiz bir çalışma ortaya çıkıyor. Elbette ki bununda işe yarar ve ihtiyaç duyduğumuz örnekleri vardır elbette. Neyse en iyisi konuyu çarpıtmadan örneğe bir göz atalım. Sağdaki kutuya X, Y ve Z ölçeği 1 olarka belirlendiği için normal 3 boyutlu ve herhangi bir genişleme özelliği olmayan kutu şeklinde görünüyor. Soldaki kutu ise yanlardan ve üstten genişliyor. Her tarafı için 1.5 yani 50% büyüme oranı verilmiş.
Bu konumuzda anlatacaklarımız buraya kadar. Genel olarak yukarıda verdiğim örnekler ve kodları ile 2B çalışmalarda IE9 dahil bütün modern tarayıcılarda sorunsuz çalışabilmesi gerekiyor. 3B olan son örnek ise IE10 ve üstü tarayıcılarda sorunsuz çalışması gerek. Temel olarak her tarayıcının kullandığı ön ekler olur Css3 transform özelliği için.
Bu ekler :
- Safari için: -webkit-
- Mozilla için: -moz-
- Internet Explorer için: -ms-
- Opera için: -o-
- Standart olanı ise ek olmayanlarıdır.
Eğer kullandığınız tarayıcı desteklemiyorsa yukarıdaki ön eklerden tarayıcıya uygun olan birini seçerek dönüşüm kodlarının önüne eklemeniz sorununuzu giderecektir.
Örnek kod:
-webkit-transform: perspective(500px) scale3d(1.5,1.5,1.5) rotateX(45deg); -moz-transform: perspective(500px) scale3d(1.5,1.5,1.5) rotateX(45deg); -ms-transform: perspective(500px) scale3d(1.5,1.5,1.5) rotateX(45deg); -o-transform:perspective(500px) scale3d(1.5,1.5,1.5) rotateX(45deg); transform:perspective(500px) scale3d(1.5,1.5,1.5) rotateX(45deg);
Yada şu şekilde de olabilir:
-webkit-transform:scaleY(1.5); -moz-transform:scaleY(1.5); -ms-transform:scaleY(1.5); -o-transform:scaleY(1.5); transform:scaleY(1.5);