CSS 2D dönüşüm

CSS 2D dönüşüm

CSS dönüşleri (transforms), elementleri hareket ettirmek, döndürmek, büyütmek ve eğimlendirmek için izin verir.

Aşağıdaki elementin üzerine fareyi getirin, 2D dönüşlerini görebilirsiniz:

2D rotate

Bu bölümde aşağıdaki CSS özelliklerini öğreneceksiniz:

  • transform

Tarayıcı Desteği

Tabloda gösterilen rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Özellik Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 2D Dönüşüm Metodu

CSS kullanarak transform Özellik, aşağıdaki 2D dönüş yöntemlerini kullanarak faydalanabilirsiniz:

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

İpucu:Bir sonraki bölümde 3D dönüşlerini öğreneceksiniz.

translate() yöntemi

Translate

translate() X eksenine ve Y eksenine verilen parametrelere göre elementi mevcut konumundan hareket ettirmek için yöntem.

Aşağıdaki örnek, <div> elementini sağa 50 piksel, aşağıya 100 piksel hareket ettirir:

Örnek

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

Kişisel olarak deneyin

rotate() yöntemi

Rotate

rotate() Verilen açıya göre elementi saat yönünde veya saat yönünün tersine döndürmek için yöntem.

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

Örnek

div {
  transform: rotate(20deg);
}

Kişisel olarak deneyin

Negatif değer kullanarak elementi saat yönünün tersine döndürün.

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

Örnek

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

Kişisel olarak deneyin

scale() yöntemi

Scale

scale() Verilen genişlik ve yükseklik parametrelerine göre elementin boyutunu artırmak veya azaltmak için yöntem.

Aşağıdaki örnek, <div> elementini orijinal genişliğinin iki katına ve orijinal yüksekliğinin üç katına büyütür:

Örnek

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

Kişisel olarak deneyin

Aşağıdaki örnek, <div> elementini orijinal genişlik ve yüksekliğinin yarısına küçültür:

Örnek

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

Kişisel olarak deneyin

scaleX() yöntemi

scaleX() Elementin genişliğini artırmak veya azaltmak için yöntem.

Aşağıdaki örnek, <div> elementini orijinal genişliğinin iki katına büyütür:

Örnek

div {
  transform: scaleX(2);
}

Kişisel olarak deneyin

Aşağıdaki örnek, <div> elementini orijinal genişliğinin yarısına küçültür:

Örnek

div {
  transform: scaleX(0.5);
}

Kişisel olarak deneyin

scaleY() Yöntemi

scaleY() Yöntem, elemanın yüksekliğini artırır veya azaltır.

Aşağıdaki örnek <div> elementinin orijinal yüksekliğini üç katına çıkarır:

Örnek

div {
  transform: scaleY(3);
}

Kişisel olarak deneyin

Aşağıdaki örnek <div> elementinin orijinal yüksekliğini yarısına indirir:

Örnek

div {
  transform: scaleY(0.5);
}

Kişisel olarak deneyin

skewX() Yöntemi

skewX() Yöntem, elemanı X eksenine göre belirtilen açıya eğer.

Aşağıdaki örnek <div> elementini X eksenine göre 20 derece eğer:

Örnek

div {
  transform: skewX(20deg);
}

Kişisel olarak deneyin

skewY() Yöntemi

skewY() Yöntem, elemanı Y eksenine göre belirtilen açıya eğer.

Aşağıdaki örnek <div> elementini Y eksenine göre 20 derece eğer:

Örnek

div {
  transform: skewY(20deg);
}

Kişisel olarak deneyin

skew() Yöntemi

skew() Yöntem, elemanı X ve Y eksenlerine göre belirtilen açıya eğer.

Aşağıdaki örnek <div> elementini X eksenine göre 20 derece, Y eksenine göre 10 derece eğer:

Örnek

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

Kişisel olarak deneyin

İkinci parametre belirtilmemişse, değeri sıfır olur. Bu nedenle, aşağıdaki örnek <div> elementini X eksenine göre 20 derece eğer:

Örnek

div {
  transform: skew(20deg);
}

Kişisel olarak deneyin

matrix() Yöntemi

Rotate

matrix() Yöntemi tüm 2D dönüşüm yöntemlerini birleştirir.

matrix() Altı parametreyi kabul eden bir yöntem, bu parametreler sayesinde elemanı döndürebilir, genişletebilir, hareket ettirebilir (traslate) ve eğebilir.

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

Örnek

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

Kişisel olarak deneyin

CSS Dönüşüm Özellikleri

Aşağıdaki tablo, tüm 2D dönüşüm özelliklerini sıralar:

Özellik Açıklama
transform 2D veya 3D dönüşümünü elemana uygular.
transform-origin Dönüşüm edilen elemanın konumunu değiştirmenize izin verir.

CSS 2D Dönüşüm Metodu

Fonksiyon Açıklama
matrix(n,n,n,n,n,n) 2D dönüşümü tanımla, altı değerli bir matris kullanarak.
translate(x,y) 2D dönüşümü tanımla, X ve Y eksenlerine göre elemanı hareket ettir.
translateX(n) 2D dönüşümü tanımla, elemanı X eksenine göre hareket ettir.
translateY(n) 2D dönüşümü tanımla, elemanı Y eksenine göre hareket ettir.
scale(x,y) 2D ölçek dönüşümünü tanımlayın, elemanın genişliğini ve yüksekliğini değiştirin.
scaleX(n) 2D ölçek dönüşümünü tanımlayın, elemanın genişliğini değiştirin.
scaleY(n) 2D ölçek dönüşümünü tanımlayın, elemanın yüksekliğini değiştirin.
rotate(angle) 2D döndürmeyi tanımlayın, parametrelerde belirtilen açıyı kullanın.
skew(x-angle,y-angle) 2D dönüşümü tanımlayın, X ve Y eksenlerine göre.
skewX(angle) 2D yatay dönüşümü tanımlayın, X eksenine göre.
skewY(angle) 2D yatay dönüşümü tanımlayın, Y eksenine göre.