CSS Transform ile Nesnelerin Değişim ve Dönüşümü

Scale

2 boyutlu düzlemde bir nesneyi dikey ve yatay olarak yeniden boyutlandırmak için kullanılır.

transform:scale(0.75);

ScaleX

2 boyutlu düzlemde bir nesneyi yatay olarak yeniden boyutlandırmak için kullanılır.

transform:scaleX(0.5);

ScaleY

2 boyutlu düzlemde bir nesneyi dikey olarak yeniden boyutlandırmak için kullanılır.

transform:scaleY(0.5);

Rotate

2 boyutlu düzlemde bir nesnenin şeklini değiştirmeden sabit bir nokta etrafında döndürmeyi sağlar.

transform:rotate(45deg);

Skew

2 boyutlu düzlemde bir nesneyi eğmeye yarar.

transform:skew(-25deg);

Translate

Bir nesneyi 3 boyutlu düzlemde konumunu değiştirmeyi sağlar.

transform:translate(20px, 5px);

Matrix

iki boyutlu dönüştürme işlevleri olan rotate() , skew() , scale() ve translate()'e bir alternatiftir. Yani bu fonksiyonlar yerine matrix() fonksiyonunu kullanabilirsiniz.

Kullanımı: matrix( a, b, c, d, tx, ty )
a, b, c, d: Bu parametreler doğrusal dönüşümü açıklamak için kullanılır.
tx: Bu parametre, x ekseni üzerindeki doğrusal ötelemeyi açıklamak için kullanılır.
ty: Bu parametre, y ekseni üzerindeki doğrusal ötelemeyi açıklamak için kullanılır.

transform: matrix(0.8, 0.8, -0.8, 0.8, 250, -30);