SEO (Arama Motoru Optimizasyonu) Mikro İnteraktif ÜCRETSİZ - Google Play'den İndirin

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

CSS Transform özelliği sayesinde bir nesnenin şekilsel olarak değişimini (eğilme, öteleme, boyut değiştirme vb..) sağlayabiliriz. Örneklerle net bir şekilde anlamaya çalışalım.

Örnekler üzerinden kısa kısa ilerleyebiliriz.

Scale

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

Scale
transform:scale(0.75);
Scale Örnek

ScaleX

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

ScaleX
transform:scaleX(0.5);
ScaleX Örnek

ScaleY

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

ScaleY
transform:scaleY(0.5);
ScaleY Örnek

Rotate

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

Rotate
transform:rotate(45deg);
Rotate Örnek

Skew

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

Skew
transform:skew(-25deg);
Skew Örnek

Translate

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

Translate
transform:translate(20px, 5px);
Translate Örnek

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.

Matrix
transform: matrix(0.8, 0.8, -0.8, 0.8, 250, -30);
Matrix Örnek
Örnek

Yorumlar

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

REKLAM

Çocuk Etkinlikleri Uygulaması

EN

  • Popüler
  • Yeni
  • Son Yorum