Transform (dönüşüm) konularını hızlıca devam ediyoruz. Şu ana kadar Transform konuları ile alakalı iki tane değeri bitirdik. Translate ve Scale konularında umarm sizlere yeteri kadar açıklayıcı olabilmişimdir. Yine aynı kategoriye giren bir diğer değer olan skew konusunu anlatacağız bu gün. Tam olarak açıklamasını nasıl yapacağıma bir türlü karar veremedim. Sözlükten çevirisine bakıldığında çarpık, eğri, yamuk, asimetrik, meyilli hatta eğri büğrü olarak da kullanılan bir kelime olduğu ortaya çıkıyor. Neyse aşağıdaki resim size anlatmak istediklerimi sanırım açıklamaya yeter.
Resimde de gördüğünüz gibi sol taraf inerken sağ taraf yukarı doğru çapraz bir şekilde çıkıyor. Photoshop kullananlar az çok bilirler bu özelliği. CTRL+T tuşlarına basıp seçtiğimiz alana sağ tıklayınca karşımıza bir kaç tane seçenek çıkar ve bu seçenekler için de skew de bulunuyor. Css3 ile birlikte gelen transform özelliğinin nimetlerinden biri olan skew aynı photoshopta olduğu gibi çerçeveleri çapraz uzatmamıza yarar.
Skew(x-angle,y-angle) kullanımı:
Parantez içine eklenen ilk rakamlar X pozisyonunu (alt ve üst çizginin sağa sola kayması), ve ikinci rakamlar da Y pozisyonu (sağ ve sol çizginin aşağı yukarı kayması) için ayarlanır. Eksi (-) olarak belirlediğinizde çapraz kayma tam tersi yönde hareket eder. Birini sıfır (0) olarak belirlerseniz o pzoisyonda hareket olmaz ve eğer birini eksi(-) diğerini de tam tersi bir numara (örnek : 10deg,-10deg)olarak ayarlarsanız bu sefer de rotate değeri gibi çalışarak çerçeveye dönme efekti verilmiş olur.
Aşağıdaki örnekte sol kutuya sadece eksi değerleri verdik ve sağdaki kutuya da artı değeri verdik. Mouse ile kutuların üzerine gelip aradaki farka bakabilirsiniz.
X ve Y pozisyonuna tersi rakamlar girince de aşağıdaki gibi dönme işlemi gerçekleşir. Kutulardan biri 20 derece sağa dönerken diğeri de 40 derece sola doğru dönüyor. İşin kötü tarafı derece 90’a yaklaştıkça kutular büyüyor. ve 180 dereceye de yaklaştıkça normal boyutuna dönüyor. 180 derece ve sıfır (0) derece kutunun orjinal pozisyonudur.
skewX(angle) kullanımı:
Sadace X pozisyonunda çapraz genişleme olur kutularda yani çerçevelerin üst ve alt kısımlarından biri sağa doğru kayarken diğeri de sola doğru kayar. Sıfır ila 180 derece arasında rakamlar kullanabilirsiniz. Tam 90 derecede dümdüz bir çizgi olacağı için kutu genişliği sıfır piksel olur ve görünmez. 90 dereceden sonrası tam tersi yönde hareket eder. Sağdaki kutunun üzerine mousunuzu getirdiğinizde alt ve üst çizginin kaydıkça kutunun genişliğinin azaldığını görebilirsiniz. Benim demolarda eksi değeri kullandığıma bakmayın. Sadece maksat değişiklik olsun diye bu şekilde kullanıyorum.
skewY(angle) kullanımı:
Üstteki örneğin tam tersi olarak kutunun sağ ve sol kenarlarından biri aşağıya diğeri de yukarıya doğru kayar.
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: skew(-10deg,-10deg); -moz-transform: skew(-10deg,-10deg); -ms-transform: skew(-10deg,-10deg); -o-transform: skew(-10deg,-10deg); transform: skew(-10deg,-10deg);
Muthis cok tesekkurler