Dönüşüm Başlangıç Noktası ve Perspektif
transform-origin ile dönüşümlerin dönme merkezini değiştirin ve perspective ile derinlik ekleyin.
Dönüşüm Başlangıç Noktası ve Perspektif, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. 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.
Varsayılan transform-origin
Varsayılan olarak dönüşümler, öğenin merkez noktası etrafında gerçekleşir: 50% 50%. transform-origin özelliği bu dönme merkezini değiştirir.
transform-origin Ayarlama
Anahtar sözcükleri, yüzdeleri veya uzunlukları kabul eder. Biçim: x-axis y-axis z-axis.
<div class="spinning-logo">Logo</div>
<div class="page-fold">Fold</div>
<div class="tooltip">Info</div>Ölçeklendirmeyle transform-origin
Sol üst köşeden ölçeklendirme (açılır liste genişletme animasyonları için kullanışlıdır):
<div class="dropdown open">Dropdown menu</div>Döndürmeyle transform-origin
Bir saat ibresini tabanı etrafında döndürme:
<div class="clock"><div class="hand"></div></div>perspective Özelliği
perspective, 3B dönüşümler için kullanıcı ile z=0 düzlemi arasındaki uzaklığı belirler. Daha küçük değerler daha çarpıcı bir perspektif bozulması oluşturur; daha büyük değerler daha hafif bir derinlik oluşturur.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
Perspektifin kaçış noktasını değiştirir. Varsayılan değer merkezdir (50% 50%).
<div class="scene"><div class="card">Card</div></div>İşlev Olarak perspective
perspective(), öğenin kendisinde de bir dönüşüm işlevi olarak kullanılabilir (üst öğede değil). Bu, 3B bağlamını yalnızca o öğeyle sınırlar.
<div class="card">Card</div>transform-style: preserve-3d
Varsayılan olarak alt öğelerin 3B dönüşümleri 2B olarak düzleştirilir. Alt öğelerin gerçek 3B konumlandırmasını korumak için üst öğede transform-style: preserve-3d ayarlayın.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>Kart Çevirme Efekti
Perspektif ve preserve-3d kullanılarak oluşturulan klasik çevirme kartı:
<div class="card-wrapper">
<div class="card"><div class="card-back">Back</div></div>
</div>
<div class="card-wrapper">
<div class="card flipped"><div class="card-back">Back (flipped)</div></div>
</div>backface-visibility
backface-visibility: hidden, 3B dönüşüm uygulanmış bir öğenin arka yüzünü gizler. Arka yüzün ön yüzün içinden görünmemesi gereken çevirme kartları için zorunludur.
Perspektif ve Başlangıç Noktasını Birleştirme
İmleç konumuna tepki veren çarpıcı bir 3B üzerine gelme eğme efekti:
<div class="card demo-active">3D Tilt Card</div>Hızlı Kontrol
Bir açılır liste, gizlemek için transform: scaleY(0) ve göstermek için scaleY(1) kullanıyor. Üstten başlayarak aşağı doğru büyümesini sağlayan transform-origin değeri hangisidir?
Özet
transform-origin, döndürme ve ölçeklendirme işlemlerinin dönme merkezini değiştirir; bu, açılır liste genişletmeleri, saat ibreleri ve üzerine gelme eğimleri için kritik öneme sahiptir. Üst öğedeki perspective, 3B derinlik bağlamı oluşturur. transform-style: preserve-3d, iç içe 3B öğeleri etkinleştirir. backface-visibility: hidden, çevirme efektlerinde öğelerin arka yüzlerini gizler.
Sıkça Sorulan Sorular
“Dönüşüm Başlangıç Noktası ve Perspektif” dersi ücretsiz mi?
Evet — “Dönüşüm Başlangıç Noktası ve Perspektif” 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.
“Dönüşüm Başlangıç Noktası ve Perspektif” dersinde ne öğreneceğim?
transform-origin ile dönüşümlerin dönme merkezini değiştirin ve perspective ile derinlik ekleyin. 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 3. dersidir.
“Dönüşüm Başlangıç Noktası ve Perspektif” 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