transform özelliği bir öğeyi görsel olarak taşımanıza, ölçeklemesine, döndürmenize ve eğmenize izin verir — belge düzenini etkilemeden (diğer öğeler hareket etmez). GPU tarafından hızlandırılmış olup, animasyon için ideal hale getirir.
{ : (, ); }
{ : (); }
{ : (); }
{ : (); }
.box {
transform: translateX(100px) rotate(45deg) scale(1.2);
/* applied right-to-left: scale, then rotate, then translate */
}
Birden fazla fonksiyon sırayla uygulanır; sırayı değiştirmek sonucu değiştirir (döndürüp sonra taşımak, taşıyıp sonra döndürmekten farklıdır).
.icon:hover { transform: scale(1.2); } /* grows on hover but neighbors DON'T move */
width/margin değiştirmeden farklı olarak, bir transform sadece öğenin çizilen görünüşünü etkiler, akıştaki kutusunu değil — bu nedenle çevredeki öğeler yerinde kalır ve yeniden akış olmaz. Transform'ların neden pürüzsüz olduğu tam olarak budur.
/* center an absolutely-positioned element */
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* hover lift */
.card:hover { transform: translateY(-4px); }
/* 3D and perspective */
.card { transform: perspective(500px) rotateY(15deg); }
translate(-50%, -50%) ortalama numarası her yerde mevcut — öğeyi kendi boyutunun yarısı kadar geri kaydırır.
/* ✅ transform + opacity are composited on the GPU — animate these */
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
Transform'lar düzeni ve boyamayı atlattığı için (sadece bileşim), onları canlandırmak 60fps'de kalır — konum/boyut canlandırmaktan çok daha ucuzdur.
Transform'lar CSS animasyonu ve mikro-etkileşimlerin (hover lifts, modals, carousels, loading spinners) işçileridir.
Düzeni tetiklemeden taşı/ölçekle/döndür yaptıkları için güçlü ve performanslı olurlar — web üzerinde hareket canlandırmanın önerilen yoludur.