Bir önceki konumuzda Css3 transforms yani dönüşümlerde kullanılan bütün değerlerin bir haritasını çıkarmıştık. Göz gezdirdiğimizde yaklaşık olarak 17 tane farklı konu çıkması gerekiyor olsa da aslında sadece 5 tane konudur. Translate, Scale, Rotate, Skew ve Perspective konularıdır bunlar. Bu gün sizlere 2 boyutlu ve 3 boyutlu çalışmalarda kullanacağınız translate değerini örnekler vererek anlatacağız.
Bu değer için kullanacağımız ayarlar basittir ve bir şeyler hazırlarken de zorlanacağınızı tahmin etmiyorum.
(x,y) pozisyonları ile kullanımı.
Aşağıdaki örnekte mouse çerçevenin üzerine geldiğinde 20 piksel sağa ve 20 piksel de sola kayma işlemi gerçekleşecektir. Eksi (-) değeri kullanarak tam tersi yönde de kayma yapabilirisniz.
Sadece x pozisonu TranslateX(x):
Bu değer ile sağdan sola veya soldan sağa nesne kaydırma işlemlerini yapabilirsiniz. Aşağıdaki örnekte mouse soldaki kutuya geldiğinde 20 piksel sağa kayma ve sağdaki kutuya gelince de 20 piksel sola kayma gerçekleşecek.
Sadece Y pozisyonu TranslateY(y)
X pozisyonunun tam tersi olan Y pozisonu yani aşağı ve yukarı doğru kayma işlemleri gerçekleşecek aşağıdaki demoda. Birine 20 piksel kaydırma değeri verdik diğerine de -20 piksel değeri verdik. Sıfır (0) ise asıl olduğu noktadır.
X ve Y pozisyonları Translate (x,y)
Aşağıdaki demolardan birine 20px X ve 20px de Y pozisyonunda kayma değeri verdiğimiz için mouse üzerine geldiğinde sağa ve aşağıya doğru çapraz bir şekilde kayma olacaktır. Diğer kutuya ise eksi (-) değeri verdiğimiz için yukarıya ve sola doğru çapraz şekilde kayacaktır.
Z pozisyonu TranslateZ
Buraya kadar olan kısım 2B dönüşümler içindi ve Internet Explorer IE9 dahil bütün modern tarayıcılar tarafından destekleniyor bunlar. TranslateZ yani 3B olunca IE9 desteklemiyor maalesef. Z pozisyonu ileri geri doğru hareket için kullanıldığından dolayı nesnenin büyümesi ve küçülmesi gibi görünüyor. Nasıl ki göz ile baktığınız bir madde uzaklaştıkça küçülüyorsa bunda da geriye gidince küçülüyor. Henüz scale (büyütme) değeri ile arasındaki farkı anlayabilmiş değilim. Sonuçta ikiside hemen hemen aynı görevi görüyorlar. Yalnız Z pozisyonunda perpective özelliği kullanılmadan tek başına çalışmıyor x ve y demolarında olduğu gibi. Genel olarak 3D örnekler ile beraber kullanılan bir değerdir. Aynı özelliği rotate konusunda da göreceksiniz.
Bu arada IE10 tarayıcısı kullandığımı zannedip son örneğin çalışmadığını fark edince triplere giriyordum neredeyse. Neyse ki IE9 tarayıcısı kullanıyorum ve çalışıp çalışmadığını göremiyorum 😀