CSS Transform: 2B ve 3B Dönüşümler Rehberi

css transform özelliği, bir elementin kapladığı yeri değiştirmeden görsel olarak kaydırılmasını, döndürülmesini, ölçeklenmesini ve eğilmesini sağlar. Bir kartı hover'da hafifçe büyütmek, bir menüyü yana kaydırmak veya bir öğeyi 3B'de çevirmek gibi efektlerin neredeyse tamamı bu tek özelliğin üstüne kurulur. En önemlisi de düzgün kullanıldığında bu dönüşümler tarayıcının yeniden yerleşim (layout) hesabını tetiklemez; bu yüzden 60 fps'lik akıcı animasyonlar için ilk tercih edilen araçtır.

Transform tam olarak ne yapar?

Bir elemente transform uyguladığında, tarayıcı o elementin render edilmiş görüntüsünü taşır. Belge akışındaki orijinal kutusu yerinde kalır: komşu elementler kıpırdamaz, sayfa yeniden dizilmez. Bu, margin veya top ile konum değiştirmekten temelde farklıdır; onlar layout'u yeniden hesaplatır, transform ise yalnızca kompozisyon (compositing) aşamasını ilgilendirir.

Birden fazla fonksiyonu boşlukla ayırarak tek satırda zincirleyebilirsin. Sıralama önemlidir çünkü her fonksiyon bir öncekinin koordinat sistemini değiştirir:

.kart {
  transform: translateX(20px) rotate(8deg) scale(1.1);
}

translate: kaydırma

translate() bir elementi yatay ve dikey eksende kaydırır. translateX(), translateY() ve iki değeri birden alan translate(x, y) biçimleri vardır. Yüzde değerleri elementin kendi boyutuna göredir; bu, ortalamada çok işe yarar:

.merkez {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Burada element önce sol-üst köşesi merkeze gelecek şekilde konumlandırılır, sonra translate(-50%, -50%) ile kendi yarı genişliği ve yarı yüksekliği kadar geri çekilerek tam ortalanır. Klasik ve hâlâ çok kullanışlı bir kalıptır.

rotate ve scale

rotate() elementi varsayılan olarak merkezinden döndürür; değeri deg, rad veya turn ile verirsin (1turn = 360 derece). Pozitif değerler saat yönündedir.

scale() elementi büyütür veya küçültür. scale(1.2) her iki ekseni de %20 büyütür; scale(2, 0.5) genişliği iki katına çıkarır, yüksekliği yarıya indirir. Değer 1 orijinal boyuttur, 0 elementi tamamen kaybeder.

.buton {
  transition: transform 0.2s ease;
}
.buton:hover {
  transform: scale(1.05);
}

Bir de skew() vardır; elementi eksenler boyunca eğer. Pratikte translate, rotate ve scale kadar sık kullanılmaz ama dekoratif şeritler ve italik benzeri efektlerde işe yarar.

transform-origin: dönüşümün çıpası

Tüm bu fonksiyonlar bir kaynak noktasına göre çalışır. Varsayılan 50% 50%, yani elementin merkezidir. transform-origin ile bunu değiştirebilirsin:

.bayrak {
  transform-origin: left center;
  transform: rotate(15deg);
}

Bu örnekte element, sol kenarından sallanan bir bayrak gibi döner. Açılır menüleri köşeden büyütmek veya bir ibreyi alt ucundan döndürmek için transform-origin şarttır.

3B dönüşümler ve perspective

Üçüncü bir eksen eklediğinde işler ilginçleşir. rotateX(), rotateY(), rotateZ() ve translateZ() elementi derinlik boyutunda hareket ettirir. Ama 3B'nin gerçekten "derinlikli" görünmesi için bir perspective tanımlaman gerekir; aksi halde dönüşüm düz görünür.

perspective iki şekilde verilir: 3B elementleri içeren ana elemente CSS özelliği olarak, ya da transform içinde fonksiyon olarak. Ana elemente vermek, kardeş elementlerin aynı sahneyi paylaşması için tercih edilir:

.sahne {
  perspective: 800px;
}
.sahne:hover .yuz {
  transform: rotateY(180deg);
}

Bir kartı tıklayınca arkasını gösteren "flip card" efekti tam olarak budur. Ana kapsayıcıya transform-style: preserve-3d eklemek, iç içe geçmiş çocuk elementlerin de 3B uzayda düzleşmeden durmasını sağlar. backface-visibility: hidden ise bir yüzeyin arkasını gizleyerek flip efektlerini temiz tutar.

Performans: neden transform tercih edilir?

Tarayıcı bir kareyi çizerken birkaç aşamadan geçer: layout (geometriyi hesapla), paint (pikselleri boya), composite (katmanları birleştir). width, top veya margin animasyonu her karede layout'u yeniden tetikler; bu pahalıdır ve takılmaya yol açar. Buna karşılık transform ve opacity animasyonları yalnızca compositing aşamasında çalışır ve genellikle GPU'ya devredilebilir.

• Konum animasyonları için left/top yerine translate kullan.
• Boyut animasyonları için width/height yerine scale kullan.
• Yeni katman oluşturulacağını tarayıcıya önceden bildirmek için will-change: transform ekle — ama yalnızca gerçekten animasyon yapan, sınırlı sayıda elemente; aşırı kullanımı belleği şişirir.

Erişilebilirlik için, vestibüler rahatsızlığı olan kullanıcıları düşünerek büyük hareketleri @media (prefers-reduced-motion: reduce) içinde kıs veya kapat.

Sık Sorulan Sorular

transform animasyonu neden left/top'tan daha akıcı?

Çünkü transform tarayıcının layout ve çoğu zaman paint aşamasını atlayarak doğrudan compositing katmanında çalışır ve GPU tarafından hızlandırılabilir. left/top ise her karede layout'u yeniden hesaplatır, bu da düşük fps'e neden olur.

Birden fazla transform fonksiyonunun sırası önemli mi?

Evet. Fonksiyonlar soldan sağa uygulanır ve her biri koordinat sistemini değiştirir. rotate sonra translate ile translate sonra rotate farklı sonuçlar verir; istediğin etkiyi görene kadar sırayla deneyebilirsin.

translateZ'nin görünmesi için ne gerekli?

Bir perspective değeri. Perspective tanımlanmadan Z eksenindeki hareketler ekrana düz yansır ve derinlik etkisi oluşmaz. Perspective'i ana kapsayıcıya verip transform-style: preserve-3d ile destekle.

Akıcı, performanslı bir arayüz mü istiyorsun? CSS transform ve modern animasyon tekniklerini projende doğru kuruyorum. Birlikte çalışmak için benimle iletişime geç.