Translate, Rotate ve Scale
Ögeleri translate() ile taşıyın, rotate() ile döndürün ve scale() ile yeniden boyutlandırın.
Translate, Rotate ve Scale, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
transform Özelliği
transform, öğelere 2B ve 3B görsel dönüşümler uygular: hareket, döndürme, ölçeklendirme ve eğme. Dönüşümler düzenlemeden sonra gerçekleşir — çevredeki öğeleri etkilemez.
translate()
Bir öğeyi mevcut konumundan taşır. Bağımsız değişkenler: x ve y yer değiştirmesi.
<div class="card demo-active">Card</div>
<div class="wrap"><div class="centered">Centered</div></div>translateX() translateY() translateZ()
Açıklığı artırmak için eksenlere özel işlevler:
<div class="slide-in active">Slide panel</div>rotate()
Bir öğeyi belirtilen açı kadar döndürür. Pozitif değerler saat yönünde döndürür.
<span class="icon demo-active">➤</span>
<span class="spinner">➤</span>scale()
Bir öğeyi düzgün biçimde veya eksenlere göre ölçeklendirir. 1’den küçük değerler öğeyi küçültür; 1’den büyük değerler büyütür.
<button class="btn demo-active">Button</button>
<div class="thumb demo-active">Thumb</div>scaleX() ve scaleY()
Tek bir eksende bağımsız olarak ölçeklendirme:
<div class="logo">LOGO</div>Dönüşümleri Birleştirme
Birden çok dönüşüm işlevi sırayla uygulanır (sağdan sola). Sonuç açısından sıra önemlidir.
<div class="card demo-active">Card</div>Dönüşüm Başlangıç Noktası
transform-origin, döndürme ve ölçeklendirme işlemlerinin dönme merkezini belirler. Varsayılan değer merkezdir (50% 50%).
<div class="card demo-active">Card</div>Tek Tek Dönüşüm Özellikleri
Modern CSS, tek tek dönüşüm işlevlerinin ayrı özellikler olarak ayarlanmasına olanak tanır:
<div class="card demo-active">Card</div>Dönüşümlerle Geçiş
Dönüşüm, GPU ile birleştirilen iki özellikten biridir. Akıcı ve yüksek performanslı efektler için bu özelliği her zaman geçişle canlandırın:
<div class="card demo-active">Card</div>translate() ve top/left Karşılaştırması
Animasyon için her zaman transform: translate() yerine top/left kullanmayı tercih edin. Dönüşüm GPU ile birleştirilir; top/left her karede düzenin yeniden hesaplanmasını tetikler.
Hızlı Kontrol
Bir kartı çevirmeye benzer şekilde bir öğeyi yatay olarak yansıtan dönüşüm işlevi hangisidir?
Özet
transform, çevresindeki içeriği etkilemeden, düzen sonrasında öğeleri taşır, döndürür ve ölçeklendirir. Hareket için translate(), döndürme için rotate(), yeniden boyutlandırma için scale() kullanın. Tek bir bildirimde birden çok işlevi zincirleyin. Modern CSS, tek tek dönüşüm özelliklerini destekler. GPU ile birleştirilen performans için her zaman geçişlerle canlandırın.
Sıkça Sorulan Sorular
“Translate, Rotate ve Scale” dersi ücretsiz mi?
Evet — “Translate, Rotate ve Scale” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Translate, Rotate ve Scale” dersinde ne öğreneceğim?
Ögeleri translate() ile taşıyın, rotate() ile döndürün ve scale() ile yeniden boyutlandırın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Translate, Rotate ve Scale” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Translate, Rotate ve Scale
- Skew ve Matrix Dönüşümleri
- Dönüşüm Başlangıç Noktası ve Perspektif
- 3B Dönüşümler: rotateX rotateY translateZ