CSS 2D Transforms KULLANIMI

CSS3 2D dönüştürme özelliği ile iki boyutlu bir uzayda elemanlar üzerinde hareket ettirme, döndürme, ölçekleme ve eğriltme gibi temel dönüştürme işlemlerini yapabilirsiniz.

Dönüştürülmüş bir eleman çevredeki elemanları etkilemez, ancak tıpkı kesinlikle konumlandırılmış elemanlar gibi üst üste gelebilir. Ancak, dönüştürülen öğe hala düzende varsayılan (dönüştürülmemiş) konumda yer tutar.

CSS Transform özelliği öğeleri görsel olarak kontrol eder ve öğeleri ölçeklendirmenizi, döndürmenizi, eğriltmenizi ve çevirmenizi sağlar.

2D dönüşüm yöntemlerinin listesi aşağıdadır:

• translate(x, y): Elemanı X ekseni ve Y ekseni boyunca dönüştürmek için kullanılır.
• translateX(n): Elemanı X ekseni boyunca dönüştürmek için kullanılır
• translateY(n): Elemanı Y ekseni boyunca dönüştürmek için kullanılır.
• rotate(): Öğeyi bir açı temelinde döndürmek için kullanılır.
• scale(x,y): Bir öğenin genişliğini ve yüksekliğini değiştirmek için kullanılır.
• scaleX(n): Bir öğenin genişliğini değiştirmek için kullanılır.
• scaleY(n): Bir elemanın yüksekliğini değiştirmek için kullanılır.
• skewX(): X ekseni ile birlikte eğim dönüşümlerini belirtir.
• skewY(): Y ekseni ile birlikte eğim dönüşümlerini belirtir.
• matrix(): Matris dönüşümlerini belirtir.

Tarayıcı Desteği

Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Element
<audio>	36.0	10.0	16.0	9.0	23.0

Translate() Fonksiyonu

CSS transform: translate() özelliği, öğeleri sola veya sağa veya yukarı ve aşağı taşımak içindir. İki değeri kabul eder:

• Birinci değer, öğenin yukarı ve aşağı veya yan yana hareket edeceği anlamına gelir. Negatif değerlerin elemanları sola, pozitif olanları sağa hareket ettirdiğini unutmayın.
• İkinci değer elemanı aşağı iter. Negatif değerler elemanları yukarı, pozitif olanlar ise aşağı taşır.

Aşağıdaki örnek, <div> öğesini geçerli konumundan 100 piksel sağa ve 10 piksel aşağı taşır:

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  }
 div.test {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(100px,10px); 
} 

ÇIKTI:

Rotate() Fonksiyonu

CSS rotate() methodu, bir öğeyi verilen dereceye göre saat yönünde veya saat yönünün tersine döndürmek için kullanılır. Elemanı saat yönünün tersine döndürmek için negatif değerler kullanabilirsiniz.

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div.test1 {
  transform: rotate(20deg);
  }

ÇIKTI:

Negatif değerlerin kullanılması elemanı saat yönünün tersine döndürür.

Aşağıdaki örnek <div> öğesini 10 derece ile saat yönünün tersine döndürür:

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

ÇIKTI:

Scale() Fonksiyonu

CSS scale() methodu, verilen genişlik ve yüksekliğe göre bir öğenin boyutunu artırmak veya azaltmak için kullanılır.

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

div {
  width: 50px;
  height: 50px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(3,2);
}

ÇIKTI:

Aşağıdaki örnek, <div> öğesini orijinal genişliğinin ve yüksekliğinin yarısı olacak şekilde azaltır:

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

CSS transform: scale, kestirme fonksiyon için scaleX(yatay olarak yeniden boyutlandırılması için) ve scaleY(dikey yeniden boyutlandırılması için).

scaleY() fonksiyonun kullanılmış, elemanın yüksekliği artar veya azalır.

.example {
  background-color: blue;
  height: 100px;
  width: 100px;
  transform: scaleY(3); 
}

Skew() Fonksiyonu

CSS skew() fonksiyonu, verilen açıya göre bir öğeyi X ekseni ve Y ekseni ile birlikte eğriltmek için kullanılır.

Aşağıdaki örnek, <div> öğesini X ekseni boyunca 20 derece ve Y ekseni boyunca 10 derece eğriliyor:

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

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

ÇIKTI:

skewX() methodu ile x ekseni yönünde skewY() fonksiyonu ile y ekseni yönünde bükebilirsiniz.

div {
  transform: skewX(20deg);
}

.test {
  transform: skewY(20deg);
}

Matrix() Fonksiyonu

Bu matrix() Methodu, tüm 2B dönüştürme foksiyonları bir araya getirir.

Bu fonksiyon, öğeleri döndürmenizi, ölçeklendirmenizi, çevirmenizi ve eğrilmenizi sağlayan matematik işlevleri içeren altı parametre alır.

Sözdizimi:

div:hover {
   width: 200px;
   height: 100px;
   background-color: yellow;
   border: 1px solid black;	 
   transform: matrix(1, 2, -1, 1, 80, 80);
}

ÇIKTI:

Mouse ile kutu üzerine gelin.