Yükleniyor...

CSS 3D Dönüşümler

Optional Advanced az önce işaretçi, caret ve yerel kromu ayarladı. Bu son isteğe bağlı ders başka bir kutu: 3D dönüşümler. Karta kaçış noktası verir, derinlikte eğer. 2D translate / scale hover dersini yeniden yazmazsınız; imleç veya resize tutacağı da seçmezsiniz.

Doğrudan yanıt

CSS 3D dönüşümler 2D’deki aynı transform özelliğidir, artı derinlik. perspectiveyi ebeveyne koyun ki çocuklar ortak kaçış noktası paylaşsın (perspective-origin o noktayı kaydırır). rotateX ve rotateY yatay ve dikey eksende eğer; rotateZ bildiğiniz düz dönüştür. translateZ izleyiciye yaklaşır veya uzaklaşır. transform-style: preserve-3d çocukları bir sahnede tutar, düzleştirmez. backface-visibility: hidden yüz arkaya dönünce gizler — iki yüzlü kart için işe yarar. Yerleşim yuvası 2D’deki gibi durur. Açıları küçük tutun. prefers-reduced-motiona uyun.

Neden 2D hareket veya UI kromu değil

2D dönüşüm dersi düzlem hareketini öğretti: translate, rotate, scale, skew ve menteşe olarak transform-origin. Hâlâ geçerli. 3D kamera gibi perspective ve ekstra eksen ekler. Kullanıcı arayüzü CSS etkileşim kromuydu (cursor, resize, caret-color, appearance). Dönen karta yalancı el gerekmez; textarea tutacağı kaçış noktası değildir. Sadece 2px kaldırma istiyorsanız 2D’de kalın.

Perspective — kamerayı ebeveyne koyun

perspective bir uzunluktur: küçük değerler daha yakın ve dramatik; büyükler daha yassı. Sahneye koyun, her yüze değil, kardeşler tek kaçış noktası paylaşsın.

Perspective on the parent

css 
.stage {
perspective: 800px;
perspective-origin: 50% 40%;
}

.card-3d {
transform: rotateY(18deg);
transform-origin: center;
}

Tek öğeye transform: perspective(800px) rotateY(18deg) de yazabilirsiniz. O kamera yalnız o kutuya aittir. Küp veya kiremit sırası için ebeveyn perspective daha sakindir. perspective-origin, transform-originın kaçış noktası kuzenidir — dönen yüzün pivotunu değiştirmez.

Eksenler — rotateX, rotateY, rotateZ

Bir kitap düşünün. rotateY kapağı sol–sağ açar. rotateX size doğru veya uzağa eğer. rotateZ sayfada döner — bildiğiniz 2D rotate().

rotateX rotateY rotateZ

css 
.tile-y {
transform: rotateY(-22deg);
}

.tile-x {
transform: rotateX(12deg);
}

.tile-z {
transform: rotateZ(8deg);
}

Gerekince 2D işlevlerle zincirleyin: rotateY(16deg) translateZ(24px). Sıra önemli — sonrakiler öncekilerin yerel uzayında çalışır. Tek transform listesi yeter, 2D dersindeki gibi. Tüm makalede rotateX(80deg) panayırdır, arayüz değil.

translateZ — mesafe, yerleşim itişi değil

Perspective ile pozitif translateZ çoğu zaman izleyiciye doğru gelir. Belgedeki komşular yer açmaz; yalnızca boya kayar, 2D translate gibi.

translateZ in a 3D scene

css 
.stage {
perspective: 900px;
}

.pop-face {
transform: translateZ(40px) rotateY(-8deg);
}

.back-face {
transform: translateZ(-28px);
}

translateZ sahne yüzlerini ayırır; margin veya günlük z-index taklidi değildir. z-index hâlâ 2D yerleşimde örtüşen kutuları sıralar; 3D mesafe başka bir düğmedir. İş «çipi 2px kaldır» ise 2D dersindeki translateY yeter.

preserve-3d — sahneyi koruyun, yassılaştırmayın

Varsayılan olarak ebeveyn dönüşmüş çocukları yassılaştırır (transform-style: flat). 3D ilişki kaybolur. Küp, yığılmış kapak veya iki yüzlü kart için dönen sarmalayıcıya preserve-3d koyun.

preserve-3d on the scene

css 
.scene {
perspective: 700px;
}

.rig {
transform-style: preserve-3d;
transition: transform 0.45s ease;
}

.rig.is-flipped {
transform: rotateY(180deg);
}

.face {
position: absolute;
inset: 0;
backface-visibility: hidden;
}

Derinliği tutması gereken her ata preserve-3d ister — unutulmuş flat ebeveyn küpü afişe basar. Yaygın ayrım: dış sahnede perspective, iç iskelette preserve-3d: kamera dışarıda, eklemler içeride.

backface-visibility — tersi gizle

Yüz 90°yi geçince ayna görünür. backface-visibility: hidden o arkayı düşürür. İki yüz: ön rotateY(0), arka rotateY(180deg), ikisi de aynı iskelette position: absolute.

Card flip with backface-visibility

css 
.card-rig {
position: relative;
transform-style: preserve-3d;
}

.card-front,
.card-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
}

.card-back {
transform: rotateY(180deg);
}

Gizli arka olmadan önden bir hayalet sızar. Bu user-select: none değil, appearance: none da değil. 3D’de boyalı bir yüzü gizliyorsunuz; onay kutusunun derisini soymuyorsunuz.

3D’ye karşı 2D transform’a karşı UI kromu

📊 3D vs 2D transform vs UI chrome

Tool Job Poor fit
perspective + rotateX / rotateY / translateZ Derinlik sahnesi: eğim, mesafe, ortak kaçış noktası Günlük 2px hover kaldırma; işaretçi şekli
2D translate / rotate / scale / skew Düzlemde hareket; origin menteşesi preserve-3d olmadan küp
transform-style / backface-visibility İç içe 3D yüzler; tersi gizleme Caret rengi; textarea resize
UI (cursor, resize, appearance…) Kontrollerde etkileşim kromu Kaçış noktaları; kart çevirme

Optional Advanced zaten kontrolleri stillendirdi. Effects & Motion 2D eşlemeyi öğretti. Bu ders transform üzerindeki derinlik katmanı. Başlıkta rotateY var diye cursor: pointer onu 3D yapmaz. Giriş formunda perspective, not alanındaki resizein yerini tutmaz.

Sakin alışkanlıklar

UI kartları için perspective’i yüzlerce piksellerde tutun (600px–1200px sağlıklı bant). bodyye perspective: 40px koymayın. :hover veya sınıfı kısa transition ile transforma bağlayın — 2D’deki gibi. Süsü prefers-reduced-motion: reduce ile kesin (none veya küçük 2D dürtme). Klavye odağı hâlâ görünür halka ister; çevirme odak stili değildir.

Modest 3D hover not a 2D lift

css 
.preview {
perspective: 1000px;
}

.preview .plate {
transition: transform 0.3s ease;
}

.preview:hover .plate {
transform: rotateY(-10deg) rotateX(4deg);
}

@media (prefers-reduced-motion: reduce) {
.preview .plate,
.preview:hover .plate {
transition: none;
transform: none;
}
}

Bu hover bir eğimdir; 2D çip kaldırması translateY(-0.15rem) değil, alanda resize: vertical da değil. Az hareket isteyenler durağan kart istiyorsa inanın.

Kendin dene

  1. Kartı .stage { perspective: 800px; } içine sarın, çocuğa rotateY(20deg) verin — sonra perspectivei çocuğun transformuna taşıyıp kardeş kiremitleri karşılaştırın.
  2. İki yüzlü kart: iskelette preserve-3d, her iki yüzde backface-visibility: hidden, arkada rotateY(180deg).
  3. Ön düzleme translateZ(32px) ekleyin; yerleşim komşularının kaymadığını görün.
  4. Sınıf + transition: transform ile çevirin — sonra prefers-reduced-motion ile yassılaştırın.
  5. Bunu cursor, resize veya yalnızca 2D translateY hover ile çözmeyin.

Sık hatalar

  • Tüm sayfa eğrilsin diye bodyde perspective: 50px
  • Sarmalayıcıda preserve-3d unutup küpün yassı kalmasına şaşmak
  • 2D çip kaldırmasını (translateY) 3D dersi sanmak
  • UI kromunu (cursor, resize, appearance) derinlik yerine kullanmak
  • backface-visibilityi sahnede, yüzlerde değil
  • Büyük rotateY çevirmelerinde prefers-reduced-motionu yok saymak
  • 3D’nin belge akışını margin gibi değiştirmesini beklemek

Özet

  • 3D dönüşümler transforma derinlik katar: perspective, rotateX / rotateY, translateZ
  • perspective ebeveyn sahnede; preserve-3d iç içe yüzlerin o uzayda kalması için
  • backface-visibility: hidden arkaya dönmüş yüzü gizler
  • Ne 2D hover kaldırma dersi ne kullanıcı arayüzü kromu
  • Küçük açılar; azaltılmış harekete saygı
  • Bu kursun son CSS dersi — Optional Advanced burada biter; haritada başka CSS slug yok

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 76 / 76
Css Ders