CSS matrix() Fonksiyonu

Önceki sayfa CSS log() fonksiyonu
Sonraki sayfa CSS matrix3d() fonksiyonu
Bir üst katmana dön CSS Fonksiyon Referans Kılavuzu

Tanımı ve Kullanımı

CSS'nin matrix() Bu fonksiyon altı değer içeren bir matrisle iki boyutlu bir transformasyon tanımlar.

matrix() Bu fonksiyon altı parametre alır ve elemente döndürme, genişletme, hareket ettirme ve eğim operasyonları yapmanızı sağlar.

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

Örnek

Örnek 1

Kullanarak matrix() Birkaç <div> elementine ikinci boyut transformasyonu tanımlayın:

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Deneyin

Örnek 2

Kullanarak matrix() İkinci boyut transformasyonu oluşturmak için resimlere:

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Deneyin

CSS Grammar

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Değer	Açıklama
scaleX()	Gerekli. Elemanın genişliğini genişletmek için kullanılan sayı.
skewY()	Gerekli. Y ekseni boyunca eğim transformasyonu yapmak için kullanılan (dönme) açı.
skewX()	Gerekli. X ekseni boyunca eğim transformasyonu yapmak için kullanılan (dönme) açı.
scaleY()	Gerekli. Elemanın yüksekliğini genişletmek için kullanılan sayı.
translateX()	Gerekli. X ekseni boyunca hareket ettirmek için kullanılan sayı.
translateY()	Gerekli. Y ekseni boyunca hareket ettirmek için kullanılan sayı.