0Pricing
CSS Academy · Ders

Skew ve Matrix Dönüşümleri

skew() ile çapraz bozulmalar oluşturun ve matrix() ile tam dönüşüm matrisleri uygulayın.

Skew ve Matrix Dönüşümleri, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. 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.

skew() Dönüşümü

skew(), bir öğeyi bir veya iki eksen boyunca eğer ve blok öğelerinde eğik ya da italik benzeri bir bozulma oluşturur.

  <div class="diagonal-section">Section</div>
  <span class="italic-badge">Badge</span>

skewX() ve skewY()

Eğme işlemini her eksene bağımsız olarak uygulayın:

  <div class="banner">Slanted background</div>

Alt Öğelere Ters Eğme Uygulama

Bir kapsayıcı eğildiğinde alt öğeleri de eğilir. Alt öğeleri dik tutmak için onlara ters eğme uygulayın:

  <div class="container"><p>Child text stays upright</p></div>

matrix() Dönüşümü

matrix(a, b, c, d, tx, ty) işlevi, 2B dönüşümlerin temel matematiksel gösterimidir. Taşıma, döndürme, ölçeklendirme ve eğme işlemlerini tek bir matris işleminde birleştirir.

  <div class="element">Matrix transform</div>

3B için matrix3d()

matrix3d(), eksiksiz 3B afin dönüşüm denetimi için 16 değere genişler. Bu genellikle karmaşık 3B efektler için JavaScript tarafından oluşturulur.

Uygulamalı Eğme: Çapraz Bölüm

Yaygın bir tasarım kalıbı — eğik bölüm arka planları:

  <div class="section-diagonal"><p>Diagonal background section</p></div>

Kullanıcı Arayüzü Vurguları için Eğme

Eğme; rozetler, şerit vurguları ve vurgulanmış metinler için dinamik bir görsel ilgi oluşturur:

  <span class="badge"><span>NEW</span></span>

3B Bağlam için Perspektif

3B dönüşümler, üst öğede bir perspektif bağlamı gerektirir. perspective, görüntüleyici ile z=0 düzlemi arasındaki uzaklığı belirler.

  <div class="scene"><div class="card">Card</div></div>

Dönüşüm İşlevlerinin Sırası

Birleşik bir bildirimdeki dönüşüm işlevlerinin sırası önemlidir. rotate then translate ile translate then rotate aynı değildir:

  <div class="scene-row">
    <span class="order-rotate-first">A</span>
    <span class="order-translate-first">B</span>
  </div>

Eğmeyi Canlandırma

Eğme, kaydırıcı ve kart çevirme efektleri için geçişle canlandırılabilir. Daha doğal bir hareket için bunu diğer dönüşümlerle birleştirin:

  <div class="card demo-active">Card</div>

Hızlı Kontrol

Bir öğeye transform: skewX(-15deg) uygulanmıştır. Metin alt öğelerine ne olur?

Özet

skewX/Y(), dekoratif bölüm ayraçları ve dinamik kullanıcı arayüzü vurguları için eğik bozulmalar oluşturur. İçeriği dik tutmak için alt öğelere ters eğme uygulayın. matrix(), tüm 2B dönüşümleri birleştiren temel matematiksel yapıdır. Zincirlenen dönüşüm işlevlerinin sırası, nihai sonuç üzerinde büyük önem taşır.

Sıkça Sorulan Sorular

“Skew ve Matrix Dönüşümleri” dersi ücretsiz mi?

Evet — “Skew ve Matrix Dönüşümleri” 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.

“Skew ve Matrix Dönüşümleri” dersinde ne öğreneceğim?

skew() ile çapraz bozulmalar oluşturun ve matrix() ile tam dönüşüm matrisleri uygulayı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 2. dersidir.

“Skew ve Matrix Dönüşümleri” 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

  1. Translate, Rotate ve Scale
  2. Skew ve Matrix Dönüşümleri
  3. Dönüşüm Başlangıç Noktası ve Perspektif
  4. 3B Dönüşümler: rotateX rotateY translateZ
← CSS Academy Sayfasına Dön