CSS Dersleri 40 - 2 Boyutlu Dönüşümler (2D Transforms)


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de 2 Boyutlu Dönüşümler ve Transform Kullanımı Konusunu öğreneceğiz.

CSS'de transform özelliği, elementleri taşımanıza, döndürmenize, ölçeklendirmenize ve eğmenize olanak tanır.

CSS transform özelliği ile aşağıdaki 2B dönüştürme metotlarını kullanabilirsiniz:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

CSS translate() kullanımı

CSS'de translate() metodu, bir elementi X ve Y eksenleri üzerinde hareket ettirmek için kullanılır.

Aşağıdaki örnek, div etiketinin mevcut konumundan 50 piksel sağa ve 100 piksel aşağıya doğru konumlanmasını sağlar :

div {
  transform: translate(50px, 100px);
}

CSS rotate() kullanımı

CSS'de rotate() metodu, bir etiketi belirli bir dereceye göre saat yönünde veya saat yönünün tersine doğru döndürmemizi sağlar.

Aşağıdaki örnek, div etiketinin 20 derece saat yönünde döndürür:

div {
  transform: rotate(20deg);
}

Eğer saat yönünün tersine bir döndürme işlemi yapmak istiyorsak , negatif değerler kullanmalıyız.

Aşağıdaki örnek, div etiketinin saat yönünün tersine 20 derece döndürür:

div {
  transform: rotate(-20deg);
}

CSS scale() kullanımı

CSS'de scale() metodu, bir etiketin boyutunu arttırmak veya azaltmak için kullanılır. 

Aşağıdaki örnek, div etiketinin orijinal genişliğinin iki katı ve orijinal yüksekliğinin üç katı olacak şekilde artırır:

div {
  transform: scale(2, 3);
}

Bir elementin orjinal boyutunun oranı 1'dir. Eğer 1 den küçük bir oran girilirse bu sefer öğenin boyutu küçülecektir.

Aşağıdaki örnek, div etiketinin orijinal genişliğinin ve yüksekliğinin yarısı oranında küçültür :

div {
  transform: scale(0.5, 0.5);
}

CSS scaleX() kullanımı

CSS'de scaleX() metodu, bir etiketin genişliğini artırır veya azaltır.

Aşağıdaki örnek, div etiiketinin orijinal genişliğinin iki katı olacak şekilde artırır:

div {
  transform: scaleX(2);
}

CSS scaleY() kullanımı

CSS'de scaleY() metodu, bir etiketin yüksekliğini artırır veya azaltır.

Aşağıdaki örnek, div etiketinin orijinal yüksekliğinin üç katı olacak şekilde artırır:

div {
  transform: scaleY(3);
}

CSS skewX() kullanımı

CSS'de skewX() metodu, bir etiketin verilen açıyla X ekseninde eğme işlemini gerçekleştirir.

Aşağıdaki örnek, div etiketinin X ekseni boyunca 20 derece eğmektedir:

div {
  transform: skewX(20deg);
}

CSS skewY() kullanımı

CSS'de skewY() metodu, bir etiketin verilen açıyla Y ekseninde eğme işlemini gerçekleştirir.

Aşağıdaki örnek, div etiketinin Y ekseni boyunca 20 derece eğmektedir:

div {
  transform: skewY(20deg);
}

CSS skew() kullanımı

CSS'de skew() metodu, bir etiketin verilen açılarla X ve Y ekseni boyunca eğmek için kullanılır.

Aşağıdaki örnek, div etiketinin X ekseni boyunca 20 derece ve Y ekseni boyunca 10 derece eğmektedir. Eğer tek açı girilirse, hem X ekseni hemde Y ekseni girilen açıyı kullanır.

div {
  transform: skew(20deg, 10deg);
}

box{
  transform: skew(20deg);
}

CSS matrix() Kullanımı

CSS'de matrix() metodu, tüm 2B dönüştürme metotlarını tek bir metotta kullanmamızı sağlar. Yani matrix metodu, tüm 2 boyutlu dönüştürme metotlarını bir arada kullanmamızı sağlar.

matrix() metodu, etiketleri döndürmenize, ölçeklendirmenize, taşımanıza (çevirmenize) ve eğriltmenize olanak tanıyan matematik işlevleri içeren altı parametre alır.

Parametreler aşağıdaki gibidir: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}