3B Dönüşümler: rotateX rotateY translateZ
3B CSS dönüşüm işlevlerini kullanarak ögeleri üç boyutlu uzayda döndürün ve taşıyın.
3B Dönüşümler: rotateX rotateY translateZ, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. 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.
3B Dönüşümlere Genel Bakış
CSS 3B dönüşümleri, Z eksenini kullanarak 2B sistemini üçüncü bir boyuta genişletir. Üst öğede perspective ve iç içe 3B öğeler için transform-style: preserve-3d kullanarak 3B’yi etkinleştirin.
rotateX()
rotateX(angle), bir öğeyi yatay X ekseni etrafında döndürür; bu, bir sayfayı kendinize doğru veya sizden uzağa çevirme gibidir.
<div class="page"><div class="leaf">Leaf</div></div>rotateY()
rotateY(angle), dikey Y ekseni etrafında döndürür; bu, bir kapıyı menteşesi üzerinde döndürme gibidir.
<div class="card-flip demo-active"><div class="card">Card</div></div>rotateZ()
rotateZ(angle), 2B rotate() işleviyle aynıdır; ekran düzleminde döndürme yapar.
rotate3d()
rotate3d(x, y, z, angle), özel bir 3B eksen vektörü etrafında döndürür. x, y ve z değerleri eksenin yönünü tanımlar.
<div class="element">3D</div>translateZ()
translateZ(), bir öğeyi Z ekseni boyunca görüntüleyiciye yaklaştırır veya uzaklaştırır. Pozitif değerler öğeyi yaklaştırır; negatif değerler uzaklaştırır.
<div class="scene-z">
<div class="layer-front">Front</div>
<div class="layer-back">Back</div>
</div>translate3d()
translate3d(x, y, z), bir öğeyi üç eksenin tamamında aynı anda taşır. translateZ(0) kullanmak, öğeyi GPU katmanına yükseltmeye zorlar (yaygın bir performans hilesi).
<div class="animated">GPU layer</div>scale3d()
scale3d(x, y, z), üç boyutta ölçeklendirme yapar. scaleZ(), derinliği ölçeklendirir; bu, 3B küp yüzleri için kullanışlıdır.
3B Küp Örneği
Altı yüzeyde 3B dönüşümler kullanarak bir küp oluşturma:
<div class="cube-scene">
<div class="cube">
<div class="cube-face front">Front</div>
<div class="cube-face back">Back</div>
<div class="cube-face left">Left</div>
<div class="cube-face right">Right</div>
<div class="cube-face top">Top</div>
<div class="cube-face bottom">Bottom</div>
</div>
</div>Paralaks 3B Efekti
Alt öğelerde translateZ kullanmak, kaydırılabilir bir 3B sahnede derinlik oluşturur (CSS paralaksı):
<div class="parallax-scene">
<div class="far-layer">Far layer</div>
<div class="close-layer">Close layer</div>
</div>Donanım Hızlandırma
translateZ(0) gibi basit olanlar da dahil olmak üzere 3B dönüşümler, öğeyi kendi GPU katmanına taşır. Bu, animasyon sırasında çizimi önler ancak GPU belleği kullanır. Bunu her durumda uygulanacak bir hile olarak değil, bilinçli şekilde kullanın.
Hızlı Kontrol
Bir öğeyi Z ekseni boyunca, yani görüntüleyiciye doğru veya ondan uzağa taşıyan dönüşüm işlevi hangisidir?
Özet
3B CSS dönüşümleri, her eksen etrafında döndürme için rotateX/Y/Z() ve derinlik hareketi için translateZ() kullanır. Üst öğede perspective ve transform-style: preserve-3d kullanarak gerçek 3B’yi etkinleştirin. Çevirme efektleri için backface-visibility: hidden kullanın. 3B dönüşümler, akıcı animasyon için GPU katmanına yükseltmeyi zorunlu kılar.
Yapay zeka eğitmeniyle CSS öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 40
- Dersler
- 159
Sıkça Sorulan Sorular
“3B Dönüşümler: rotateX rotateY translateZ” dersi ücretsiz mi?
Evet — “3B Dönüşümler: rotateX rotateY translateZ” 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.
“3B Dönüşümler: rotateX rotateY translateZ” dersinde ne öğreneceğim?
3B CSS dönüşüm işlevlerini kullanarak ögeleri üç boyutlu uzayda döndürün ve taşıyı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 4. dersidir.
“3B Dönüşümler: rotateX rotateY translateZ” 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