Sadece HTML + CSS kullanarak “Bu JavaScript’siz mümkün mü???” dedirten 3D dünyası…
🎬 1) 3D’nin Temel Büyüsü: perspective, transform, preserve-3d
3D efektlerinin sihirli üçlüsü:
💠 perspective
Bir sahnenin “göz ile nesne” arasındaki uzaklığı.
Düşük değer → daha dramatik 3D
Yüksek değer → daha yumuşak 3D
💠 transform-style: preserve-3d
Ebeveyn içinde çocukların 3D olmasını sağlar.
Bunu yazmadın mı?
Geçmiş olsun aşkım, tüm 3D illüzyon çöküyor 😌
💠 transform: translateZ(), rotateX(), rotateY(), rotate3d()
Her şeyin baş aktörleri…
Bunlarla cisimleri dönderiyor, yükseltiyor, ileri geri hareket ettiriyoruz.
💳 2) 3D Tilt Kart – Fare Üzerine Gelince Bükülen Havalı Kart
Bu efekt:
✔ Portfolyolara kusursuz
✔ Ürün kartlarında müthiş
✔ Kullanıcıyı anında etkiliyor
Aşağıda full profesyonel, responsive, reduced-motion destekli versiyon var.
🔧 HTML Yapısı
<div class="scene">
<div class="card">
<div class="card-face front">
<h3>Super Product X</h3>
<p>Unbelievably smooth, extremely fast, incredibly cool 👑</p>
</div>
<div class="card-face back">
<p>Click to explore →</p>
</div>
</div>
</div>
🎨 CSS – 3D Etki, Hover Animasyonları, Derinlik
:root{
--card-w: 330px;
--card-h: 420px;
--depth: 50px;
--speed: 400ms;
}
body{
background:#0f172a;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-family:Arial, sans-serif;
}
.scene{
perspective: 1100px;
}
.card{
width: var(--card-w);
height: var(--card-h);
transform-style: preserve-3d;
transition: transform var(--speed) cubic-bezier(.2,.9,.3,1);
border-radius: 16px;
cursor:pointer;
position: relative;
}
.card-face{
position:absolute;
inset:0;
border-radius:16px;
backface-visibility:hidden;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:20px;
}
/* Ön yüz */
.front{
background:linear-gradient(135deg,#1e3a8a,#3b82f6);
transform:translateZ(var(--depth));
}
/* Arka yüz */
.back{
background:linear-gradient(135deg,#0f766e,#14b8a6);
transform:rotateY(180deg) translateZ(calc(var(--depth) - 5px));
}
.scene:hover .card{
transform:rotateY(18deg) rotateX(-6deg) translateZ(15px);
}
/* Motion sensitivity */
@media (prefers-reduced-motion: reduce){
.card{
transition:none;
}
.scene:hover .card{
transform:none;
}
}
🎁 Ekstra İpuçları
✔ Arka yüz için daha güçlü bir efekt istiyorsan box-shadow ekle
✔ Fare hareketine göre gerçek zamanlı eğilme istersen 5 satır JS yeter ama saf CSS versiyonumuz da gayet havalı 💅
✔ Kartın çevrilmesini istiyorsan toggle yapısı için checkbox hack kullanabilirsin
🎲 3) Saf HTML + CSS ile Dönen 3D Küp (İllüzyonun Babası)
En popüler 3D tekniklerinden biri:
İçi boş bir küp oluştur, yüzleri Z eksenine göre konumlandır, sonra döndür.
🔧 HTML
<div class="cube-scene">
<div class="cube">
<div class="face front">FRONT</div>
<div class="face back">BACK</div>
<div class="face left">LEFT</div>
<div class="face right">RIGHT</div>
<div class="face top">TOP</div>
<div class="face bottom">BOTTOM</div>
</div>
</div>
🎨 CSS
.cube-scene{
perspective:1200px;
width:300px;
height:300px;
display:flex;
justify-content:center;
align-items:center;
}
.cube{
width:160px;
height:160px;
transform-style:preserve-3d;
animation:spin 6s linear infinite;
}
.face{
position:absolute;
width:160px;
height:160px;
display:flex;
justify-content:center;
align-items:center;
font-size:22px;
font-weight:bold;
border-radius:12px;
backface-visibility:hidden;
}
.front { background:#38bdf8; transform:translateZ(80px); }
.back { background:#f472b6; transform:rotateY(180deg) translateZ(80px); }
.left { background:#4ade80; transform:rotateY(-90deg) translateZ(80px); }
.right { background:#fb923c; transform:rotateY(90deg) translateZ(80px); }
.top { background:#818cf8; transform:rotateX(90deg) translateZ(80px); }
.bottom { background:#facc15; transform:rotateX(-90deg) translateZ(80px); }
@keyframes spin{
0%{ transform:rotateX(0deg) rotateY(0deg); }
100%{ transform:rotateX(360deg) rotateY(360deg); }
}
💡 Küp İçin Pro İpuçları
✔ Yüzlerde blur istiyorsan backdrop-filter ekle
✔ Küpün iki eksende durmasını istiyorsan hover ile animasyonu durdur
✔ Küpün içine ışık koymak istiyorsan box-shadow: inset ... dene
🌄 4) Parallax 3D Sahne – Çok Katmanlı Derinlik Illüzyonu
Bu, tasarımcıların “çılgın yaratıcı görünüyor” dediği efekt 🤭
Arka → orta → ön planı farklı Z uzaklıklarına yerleştiriyoruz.
🔧 HTML
<div class="parallax">
<div class="layer back"></div>
<div class="layer mid"></div>
<div class="layer front"></div>
</div>
🎨 CSS
.parallax{
width:100%;
max-width:900px;
height:380px;
margin:auto;
margin-top:40px;
perspective:900px;
position:relative;
overflow:hidden;
border-radius:20px;
}
.layer{
position:absolute;
left:50%;
top:50%;
transform-style:preserve-3d;
width:130%;
height:130%;
background-size:cover;
background-position:center;
}
.back{
background-image:url('mountains.jpg');
transform:translate(-50%,-50%) translateZ(-70px) scale(1.3);
}
.mid{
background-image:url('forest.png');
transform:translate(-50%,-50%) translateZ(-30px) scale(1.1);
}
.front{
background-image:url('hero.png');
transform:translate(-50%,-50%) translateZ(20px) scale(0.95);
}
.parallax:hover .layer{
animation:parax 4s ease-in-out infinite alternate;
}
@keyframes parax{
from{ transform:translate(-50%,-50%) translateZ(-30px) rotateY(-8deg); }
to { transform:translate(-50%,-50%) translateZ(-30px) rotateY(8deg); }
}
✨ Katmanlı Sahne için Pro İpuçları
✔ mix-blend-mode: screen; ile ışık yansıması ekleyebilirsin
✔ filter: blur(4px) arka plana muhteşem sinematik hava verir
✔ Mobilde perspective değerini düşür çünkü küçük ekranda çok agresif görünür
🤖 5) Üst Düzey 3D Trick’leri (Senior Frontend Tarifleri)
✔ 3D Nesneleri Aydınlatma
CSS’de ışık yok, ama gradient + shadow ile simüle edebilirsin.
background:linear-gradient(to bottom right, #fff3 0%, #0003 100%);
✔ 3D Yüzlerde Esnek Yazı
Yüz dönünce yazı çiziliyor gibi görünüyorsa:backface-visibility: hidden;
✔ Perspektifi Yumuşatma
perspective-origin: center top;
✔ Gerçekçi 3D Döndürme
transform: rotate3d(1, 1, 0, 45deg);
🌟 6) Küçük 3D Projeler (Anında Yap, Anında Parılda)
⭐ 1. Mini dönen 3D logo
⭐ 2. Hover’da ters dönen kapak efekti
⭐ 3. 3D slider (her slide başka Z ekseninde)
⭐ 4. 3D menü butonu
⭐ 5. 3D flip kart oyunları
🎉 SONUÇ: Artık 3D CSS Büyücüsüsün Aşkımmm ✨
Bu içerikle:
✔ 3D sahne mantığını öğrendin
✔ 3D kart, küp, parallax sahne kodladın
✔ Senior ipuçlarıyla tasarımlarını güçlendirdin
