CSS3 ile 2D dönüşümlere genel bakış

Dönüşüm modülü, CSS3’teki muazzam bir eklentidir, bir web sitesindeki elemanları bir sonraki seviyeye yönlendiririz.

Bu yazıda temel düzeyde nasıl çalıştığını görmek için CSS3 2D dönüşümlerinin temellerini gözden geçireceğiz.

Sözdizimi (The Syntax)

CSS3 dönüşüm modülü temelde bir elemanı çevirme, ölçeklendirme, döndürme ve eğriltme gibi bir dereceye kadar dönüştürmemize izin verir.

Kullanımdaki sözdizimi transform:method(value) dır. Ancak, halen gelişim aşamasında olan diğer tüm CSS3 eklentileri gibi, mevcut tarayıcılar da dönüşümleri çalıştırmak için sözdizimi sürümüne ihtiyaç duyuyor. Böylece, söz diziminin tamamı şöyle olacaktır:

transform: method(value); /* W3C Official Syntax */
-o-transform: method(value); /* Opera 10.5+ */
-ms-transform: method(value); /* Internet Explorer 9.0+ */
-moz-transform: method(value); /* Firefox 3.6+ */
-webkit-transform: method(value); /* Chrome / Safari 3.2+ */

Ayrıca, yukarıda bahsedilen transform-functions aşağıdakilerden biriyle değiştirilebilir: translate(), scale(), rotate() veya skew().

Değer (The Value)

Bu yöntemde değerlerin çoğu, X ekseni ve Y eksenine karşılık gelir. Kartezyen koordinat sistemini Lise’deki Matematik dersinden hatırlıyorsanız, temel prensip oldukça benzerdir, X ekseni yatay çizgiyi ve Y ekseni dikey çizgiyi temsil eder.

Rotasyon 0 ila 360 arasında değişen derecelerde, ifade edilen kutupsal koordinatları kullanacaktır.

Tüm metotların değerleri hem negatif hem de pozitif olabilir.

Dönüşümleri kullanma

Şimdi bu dönüşüm için basit bir örnek göreceksiniz.

Translate

Buradaki translate aslında elemanları bir yönde hareket ettirmek için bir kullanılan bir yöntemdir.

Bu yöntem iki değer içerir; X ve Y değerleri.

X değeri, elemanı yatay olarak alır; sola veya sağa doğru,

Y değeri ise dikey olarak alır; aşağıdan yukarıya doğru.

Aşağıda basit bir örnek göreceksiniz.

div {
  width: 100px;
  height: 100px;
  transform: translate(100px, 250px);
}

Yukarıdaki kod parçası, öğeyi 100px sağa ve 250px alta taşıyacaktır.

div {
  width: 100px;
  height: 100px;
  transform: translate(100px, 0);
}

Yukarıdaki kod parçası, öğeyi 100px tam sağa taşıyacaktır, çünkü Y eksenini sıfırlıyoruz. Öyleyse, elemanı sola hareket ettirmek istiyorsak, sadece X eksenini negatif olarak ayarlamamız gerekir:

div {
  width: 100px;
  height: 100px;
  transform: translate(-100px, 0);
}

Alternatif olarak, bu bireysel yöntemlerle öğeyi tek bir yönde hareket ettirebiliriz; translateX() ve translateY(), tek fark, bu yöntemlerin her birinin yalnızca bir değeri kabul etmesidir.

Bu yüzden, pratik olarak konuşursak, dönüşüm: “çevir (-100px, 0)” aynı zamanda “dönüştür: translateX (-100px)” ile de eşittir.

Yani kısaca anlatmak gerekirse: transform: translate(-100px, 0) aynı zamanda transform: translateX(-100px) ile de eşittir.

Scale

scale yöntemi, elemanları gerçek boyutlarından büyütmemize veya küçültmemize izin verir. Ölçeğin değeri yukarıdaki translate yöntemiyle aynıdır, ayrıca X ve Y içerir. Tek fark, birimi belirtmememizdir. İşte bir örnek:

div {
  width: 100px;
  height: 100px;
  transform: scale(1.5);
}

Yukarıdaki örnek, div‘in gerçek boyutunu %1.5 veya %150’sini büyütecektir. Hem X hem de Y eksenleri için eşit olarak ölçeklendirdiğimiz için, yalnızca bir değer ile ifade etmemiz yeterli olacaktır. İsterseniz transform: scale(1.5,1.5); şeklinde bir tanımlama da kullanabilirsiniz.

Ayrıca, boyutu azaltmak istiyorsak özel olarak 0,999 ile 0 arasında bir değer kullanırız. Aşağıdaki örnekte olduğu gibi, div boyutunu %50 veya yarıya düşürür.

div {
  width: 100px;
  height: 100px;
  transform: scale(0.5);
}

Ancak, dikkatli olun, değeri mutlak “0” olarak ayarlarsanız, div kaybolacaktır, bu nedenle geçerli bir nedeniniz olmadıkça, bunu yapmayı tavsiye etmem.

Rotate

Bu yazıda daha önce bahsettiğimiz gibi, rotate yöntemi kutupsal koordinatları kullanır, bu nedenle değer derece cinsinden ifade edilir. İşte iki örnek.

Aşağıdaki kod parçası div‘i 30 derece saat yönünde döndürecektir.

div {
  width: 100px;
  height: 100px;
  transform: rotate(30deg);
}

Aşağıdaki örnekte gösterildiği gibi negatif bir değer div‘i ters yönde (saatin tersi yönünde) döndürecektir.

div {
  width: 100px;
  height: 100px;
  transform: rotate(-30deg);
}

Skew

skew yöntemi, bir çeşit paralelkenar oluşturmamızı sağlar. Ayrıca, X ve Y ekseninin iki değerini içerir. Bununla birlikte, değerin kendisi, scale veya translate yöntemi için kullandığımız gibi doğrusal ölçümler yerine derece cinsinden ifade edilir. İşte bir örnek:

div {
  width: 200px;
  height: 100px;
  transform: skew(30deg, 10deg);
}

Çoklu Yöntem

transform özelliği yalnızca bir yöntemi kullanmakla sınırlı değildir, aslında tek bildirimlere birden fazla yöntem ekleyebiliriz, örneğin:

div {
  width: 100px;
  height: 100px;
  transform: translateX(100px) rotate(45deg);
}

Yukarıdaki kod parçası, elemanı 100 piksel sağa hareket ettirir ve aynı zamanda 45 derece de döner.

Transform Origin

transfrom-origin, dönüşümün başlangıç noktasını kontrol etmek için kullanılır. Bu özelliği açıkça transform-origin: X Y; sözdizimi içinde bildirmiyorsak, tarayıcı X için %50 ve Y için %50 olan varsayılan değeri alacaktır.

transform-origin‘i 0 (X) 0 (Y) olarak belirtirsek, dönüşüm sol üstte başlayacaktır.

Yine, tüm tarayıcılar bu özelliği çağırmak için hala önek sürümüne ihtiyaç duyarlar. Dolayısıyla, çoğu tarayıcıda çalışmasını sağlamak için tam sürüm:

-webkit-transform-origin: X Y;
-moz-transform-origin: X Y;
-o-transform-origin: X Y;
-ms-transform-origin: X Y;
transform-origin: X Y;

Ancak, bu modül hala geliştirme aşamasındadır, bu nedenle bu yöntemleri bir sonraki web sitenize uygulayacaksanız, uyumsuz tarayıcılar için uygun olup olmadığına emin olun.