6XC

CSS Transform Oluşturucu

Döndürme, ölçek, kaydırma ve eğmeyi görsel olarak birleştirin, çıkan transform CSS'ini kopyalayın.

972 görüntülenme

transform Özelliği

transform; öğeyi belge akışını bozmadan taşır, döndürür, ölçekler ve eğer; üstelik GPU hızlandırmalıdır — akıcı animasyonlarda (opacity ile birlikte) tercih edilmesinin sebebi budur. Fonksiyonlar sağdan sola uygulanır; sırası önemlidir: rotate(45deg) translateX(50px) ile tersi aynı sonucu vermez.

Sıkça Sorulan Sorular

Fonksiyon sırası neden önemli?

Her fonksiyon, sonrakinin koordinat sistemini dönüştürür. Önce translate sonra rotate: önce taşır, yerinde döndürür. Önce rotate sonra translate: ekseni döndürdüğü için taşıma çapraz gider.

transform çevredeki öğeleri etkiler mi?

Hayır — öğe yerleşimdeki özgün yerini korur. Bu, animasyonu ucuz kılar ama üst üste binmelere dikkat etmenizi gerektirir.

Benzer Araçlar

CSS Gradient Oluşturucu Doğrusal, dairesel ve konik CSS degradelerini canlı önizlemeyle tasarlayın, kodu kopyalayın. Oluştur CSS Box Shadow (Gölge) Oluşturucu Kutu gölgesini görsel olarak tasarlayın — kaydırma, bulanıklık, yayılma, renk, opaklık ve inset — canlı önizlemeli. Oluştur CSS Border Radius Oluşturucu Köşeleri tek tek veya hep birlikte, px ya da % olarak yuvarlayın — canlı önizleme ve kopyalanabilir CSS. Oluştur CSS Text Shadow (Yazı Gölgesi) Oluşturucu Yazı gölgesini kaydırma, bulanıklık, renk ve opaklıkla tasarlayın — örnek metin üzerinde canlı önizleme. Oluştur