Tarayıcıların Css3 desteklerinin genişlemesiyle birlikte bu alanda yapılan birçok çalışmayı artık rahatlıkla test edebiliyoruz. Özellikle son dönemlerde gördüğümüz örneklerde Css3′ün Transform parametresinden yararlanılarak birçok uygulama yapılabiliyor.
Bu makalemizde Css3 Transform (dönüştürme) işlemlerinin ne olduğunu ve nasıl kullanıldığını anlatacağız. Rotate, Translate, Skew ve Scale gibi özelliklerden bahsedecek ve örneklerle kodlarımızın nasıl çalıştığını göreceğiz.
BAŞLAMADAN ÖNCE
Konumuza geçmeden önce biraz Css 2d Transform hakkında bilgi vermek istiyorum. Transform Türkçe karşılığı olarak Dönüştürme anlamına gelmektedir. Bu tanımdan da şu anlaşılıyor ki Css ile web elementlerimizi belli bir biçimden başka bir biçime dönüştürebiliyoruz. Örneğin Rotate ile web elementlerimizi belli bir derecede döndürebiliyoruz, Skale ile belli bir boyuta ölçekleyebiliyoruz. Bu özelliklerin hepsini makalemizin ilerleyen bölümlerinde tek tek anlatacağız.
Web elementlerinin dönüştürme işleminde temel alınan nokta X ve Y eksenlerinde (X ekseni yatay [horizontal] konumu Y ekseni dikey [vertical] konumu temsil etmektedir) verilen uygun değerlerdir. Şimdi dilerseniz kısaca bu özelliklere ve nasıl kullanılacağına geçelim.
(Hemen söylemeliyim ki makalemizde yapmış olduğumuz örnekleri Firefox 3.6, Safari 4.04, Opera 10.50 ve Google Chrome 4.0.249 tarayıcılar ile sorunsuzca görüntüleyebilirsiniz. Her bir örneğin içerisinde tarayıcılar için uyumlu Css kodunu da yazacağız)
ROTATE (Döndürme)
Rotate parametresi ile web ögelerini belli bir açı içerisinde döndürebiliyoruz. Bu açı bizim belirlediğimiz bir pozitif veya negatif değer olabilir. Şimdi aşağıda bir örnek uygulama yapalım ve sonucunu test edelim.
<div style="background:#2e83ff; border:4px solid #9a9; width:100px; height:100px; margin:100px; -moz-transform: rotate(45deg); /* Firefox için */ -webkit-transform: rotate(45deg); /* Safari ve Google Chrome için */ -o-transform: rotate(45deg); /* Opera için */ "></div>
Yazılan kodun şimdi nasıl göründüğünü buradan test edelim.
Örnek kodumuzda bir div etiketine inline (dahili) olarak stil ataması yaptık. Önce arkaplan rengini sonra kenarlığını, en ve boy oranlarını tanımladık. Sonrasında döndürme için gerekli olan Css parametremizi yazdık. -moz-transform: rotate(45deg); şeklinde verdiğimiz atama ile alanı 45 derece döndürmüş olduk. Rotate sonrasında parantez içine web ögesini kaç derece döndürmek istiyorsak bunu xxdeg şeklinde yazıp parantezi kapatıyoruz. Dilerseniz bu değeri başına – işareti koyarak negatif olarakta verebilirsiniz. -webkit-transform: rotate(-45deg) gibi.
Aynı uygulamayı paragraf ve başlık etiketi gibi block etiketlerde de yapmamız mümkün. Kodlarımızda herhangi bir değişiklik olmadan aynı şekilde uygulayabiliriz. Hemen bir örnek kod daha yazalım ve test edelim.
<p style="background:#eee; border:4px solid #9a9; color:#666; -moz-transform: rotate(40deg); -webkit-transform: rotate(40deg); -o-transform: rotate(40deg); width:200px; height:200px; margin:100px; display:block; float:left; padding:5px; font:16px/24px arial, verdana, sans-serif; "> p etiketi içine yazmış olduğumuz bu yazı 40 derece dönmüş olmalı... </p>
Örneğimizin çalışır halini buradan test edebilirsiniz.
SCALE (Ölçekleme, Ölçeklendirme)
Transform işleminin bir başka parametresi de Scale. Scale Türkçemize Ölçekleme olarak çevrilebilir. Kısaca izah etmek gerekirse Css’de bir ögeyi X ve Y eksenlerinde belirli oranlarda boyutlamaya yarayan bir atamadır. Bu konuyu bir küçük örnek ile anlatmak daha doğru olacaktır.
<div style=" height:100px; width:100px; display:block; float:left; background:#2e83ff; -moz-transform: scale(2, 4); -webkit-transform: scale(2, 4); -o-transform: scale(2, 4); position:absolute; top:200px; left:200px; "> </div>
Örneğin çalışır halini buradan izleyebilirsiniz.
Örneğimizde kullandığımız kodda 100 piksel eninde ve 100 piksel boyunda bir div etiketini tanımladık. Scale(2, 4) şeklinde verdiğimiz değer sayesinde 100 piksellik yatay ekseni 2 katına büyüttük. Yani artık width değeri 200 piksel oldu. (100*2=200 piksel) Aynı şekilde Y ekseninde ise 4 kat bir büyüme istedik. Bu sayede height değeri ise 400 piksel oldu. (100*4=400 piksel)
Scale parametresini kullanırken verdiğimiz ilk değer X eksenini sonraki değer ise Y eksenini ifade etmekte. Dilersek sadece X veya sadece Y değerini de ölçekleyebiliriz. Bunun için scaleX(5) veya scaleY(2) gibi bir değer kullanmamız yeterli olacaktır.
Şayet hem X hem de Y ekseninde aynı oranda bir ölçekleme yapacaksak o zaman tek bir rakam değeri yazıyoruz. Örnek olarak scale(4); şeklinde bir kullanımda en ve boy olarak 4 katı bir büyüme elde ederiz.
TRANSLATE (Değiştirme, Dönüştürme)
Translate parametresi sayesinde bir web ögesinin X ve Y ekseninde yeniden konumlandırabiliyoruz. Yine örnek bir kod ile konumuzu açıklamaya çalışalım.
<div style=" height:50px; width:50px; display:block; float:left; background:#2e83ff; -moz-transform: translate(200px, 300px); -webkit-transform: translate(200px, 300px); -o-transform: translate(200px, 300px); position:absolute;"> </div>
Verdiğimiz kodların çalıştığı sayfayı buradan izleyebilirsiniz.
Yapmış olduğumuz örnekte 50 piksel eninde ve 50 piksel boyundaki kutumuzu translate ile yeniden konumladık. Kutumuz başlangıçta X ve Y ekseninde (translate değeri vermeden önce) 0 pozisyonundaydı. Örnek kodda verdiğimiz translate(200px, 300px) değeri ile kutunun X ekseninde 200px ve Y ekseninde 300px yer değiştirmesini sağladık. Bir bakıma left:200px ve top:300px değeri vermiş gibi işlem yaptık.
Yine Scale’de olduğu gibi X ve Y eksenlerinde tekil olarakta atamalar yapabiliriz. Bunun için translateX(100px) veya translateY(10px) gibi değerler kullanmamız yeterli olacaktır.
Translate bu örnek ve anlatım ile sizlere biraz gereksiz bir parametre gibi görünebilir. Ancak bir web elementini yeniden konumlayabilmek ve belirli bir noktaya taşımak şimdi ne kadar gereksiz görünse de ileride Css ile animasyonların yaygınlaşmaya başladığı dönemlerde kıymeti daha da fazla anlaşılacaktır. Bir ögenin bir noktadan bir noktaya bir geçiş (transition) ile taşınması oldukça güzel bir animasyon etkisi oluşturabilir. (Kaldı ki Webkit tabanlı tarayıcılarda artık Css’de yaptığımız animasyonları test etmeye başladık)
SKEW (Eğrilik, Çarpıklık, Yamukluk)
Skew değerini Photoshop kullanıcıları iyi bileceklerdir. Skew ile bir web elementinin X ve Y eksenlerine belirli açılar verilebilir. Bu sayede o ögeye belli bir eğrilik, belli bir yamukluk açısı kazandırmış oluruz. Yine örneğimizi yazarak konumuzu açıklamaya çalışalım.
<div style=" height:75px; width:75px; display:block; float:left; background:#2e83ff; -moz-transform: skew(45deg, -20deg); -webkit-transform: skew(45deg, -20deg); -o-transform: skew(45deg, -20deg); position:absolute; left:300px; top:300px; "> </div>
Örneğimizi izlemek için buraya gözatabilirsiniz.
Örnek kod içinde 75 piksel eninde ve yine aynı boyda bir kutu oluşturduk. Bu kutunun X ekseninde 45 derecelik, Y ekseninde ise -20 derecelik bir açılaşma yapmasını istedik. Bu sayede kutumuzu ilk halinden daha çarpık bir hale getirdik. Yine Translate parametresinde olduğu gibi sadece X veya sadece Y ekseninde belirli açılar vermek mümkündür. skewX(45deg) gibi bir kullanım sadece X eksenine 45 derecelik açı verecektir.
Skew değeri atanarak oluşturulmuş basit bir küp görünümü için tıklayınız.
TÜM PARAMETRELERİN BİR ARADA TANIMLANMASI
Yukarıda kısa bir şekilde Transform özelliğinden bahsetmeye çalıştık. Css kodlarımızı yazarken her elemente ayrı ayrı parametre ve değer yazmaktansa hepsini birleştirerek bir yazım yapabiliriz.
-moz-transform: scale(1, 2) translate(50px, 100px) skew(45deg, -15deg) rotate(50deg);
Gördüğünüz gibi aralarında boşluk bırakarak tüm parametre ve değer atamalarını yaptık. Bu nedenle her bir tanım için ayrı ayrı kod yazmamıza gerek kalmadı. Css kodlarımızı oldukça kısaltmış olduk üstelik.
TARAYICI UYUMU İÇİN KODLARIN DEĞİŞİMİ
Aslına bakarsanız farklı tarayıcılar için farklı kodlar yazmıyoruz. Sadece parametrenin başına tarayıcının motorunu simgeleyici bir ön ek getiriyoruz.
Firefox için -moz, Webkit için -webkit ve Opera için -o öneklerini kullanmamız yeterli oluyor. Zaten makalemizdeki örnek kodlar içerisinde ziyadesiyle bunları kullandık. Okuyucularımızın kafasının karışmaması için bu açıklamayı yapmayı uygun buldum.
Peki ya Internet Explorer?
Bu özelliklerin tümünün kullanımı için sanıyorum IE 9 veya 10′un çıkmasını beklemek zorundayız :) Şaka bir yana bazı parametreler IE tarayıcılarda belli filter’lar ile yapılabiliyor. Ancak tüm özellikleri de kapsamıyor. IE’nin bir sonraki versiyonunda Css3′e desteğinin biraz daha iyi olmasını umut ediyoruz.
SON OLARAK…
Gerek kodlar gerekse de görsel ögelerle destekleyerek size Css3 2d Transforms konusunu anlatmaya çalıştım. Atladığım veya unuttuğum noktalar olmuşsa lütfen yorumlarınızla beni bilgilendiriniz. Bu makaleyi hazırlarken W3C’nin konu hakkındaki yayınlanmış doküman‘ından yararlandım. Umarım sizler için faydalı olmuştur.