CSS3 Ile Dönen Animasyonlu 3D Küp Yapımı (Adım Adım Rehber)

CSS3 ile Dönen Animasyonlu 3D Küp nasıl yapılır? HTML ve CSS ile etkileşimli dönen bir küp tasarımı yapmak için adım adım rehber!

Neden 3D Küp Yapmayı Öğrenmelisin?

Web sitende göz alıcı bir görsel efekt mi istiyorsun? Kullanıcıyı etkileyen küçük detaylar, CSS ile kodlandığında hem hafif hem de etkileyici olur. “CSS3 ile dönen animasyonlu 3D küp yapımı” tam olarak bu detaylardan biri. Üstelik JavaScript’e bile ihtiyaç yok!

Bu yazıda sana HTML ve CSS kullanarak nasıl bir 3D dönen küp yapılacağını basit ama güçlü bir örnekle anlatacağım.

CSS3 ile Dönen Animasyonlu 3D Küp Yapımı İçin Gerekenler

Bu örnekte sadece HTML ve CSS kullanacağız. İşte ihtiyacımız olan başlıca teknolojiler:

transform-style: preserve-3d
transform: rotateX/rotateY/rotateZ
@keyframes
perspective

Adım Adım 3D Küp Yapımı

📁 1. HTML Yapısı

<div class="kutu-sahne">
  <div class="kutu">
    <div class="yuz on">Ön</div>
    <div class="yuz arka">Arka</div>
    <div class="yuz sol">Sol</div>
    <div class="yuz sag">Sağ</div>
    <div class="yuz ust">Üst</div>
    <div class="yuz alt">Alt</div>
  </div>
</div>

HTML

🎨 2. CSS ile Stil ve Animasyon

.kutu-sahne {
  width: 200px;
  height: 200px;
  perspective: 800px;
  margin: 100px auto;
}

.kutu {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: don 10s infinite linear;
}

.yuz {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(30, 144, 255, 0.8);
  border: 2px solid #fff;
  line-height: 200px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  font-family: sans-serif;
}

.on  { transform: rotateY(0deg)   translateZ(100px); }
.arka { transform: rotateY(180deg) translateZ(100px); }
.sol  { transform: rotateY(-90deg) translateZ(100px); }
.sag  { transform: rotateY(90deg)  translateZ(100px); }
.ust  { transform: rotateX(90deg)  translateZ(100px); }
.alt  { transform: rotateX(-90deg) translateZ(100px); }

@keyframes don {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

CSS

Canlı Önizleme

Kodu doğrudan bir HTML dosyasında çalıştırdığında 3D dönen küp sahnede belirecek. Eğer detaylı canlı örnekler istersen, bu bağlantıya göz atabilir ya da kendi projene entegre edebilirsin.

Tasarımda Nerelerde Kullanılır?

CSS3 ile Dönen Animasyonlu 3D Küp Yapımı

Portfolyo sayfalarında görsel efektler
Eğitim simülasyonları
Ürün tanıtım sayfalarında etkileşimli öğeler

Küçük CSS dokunuşlarıyla ziyaretçilerin ilgisini çeken içerikler oluşturabilirsin. Bu tür efektler Google News gibi platformlarda olmasa da, modern web tasarımının bir parçası olarak öne çıkıyor.

Sonuç: CSS ile Etkileşimli 3D Tasarımlar Mümkün

Bugün seninle CSS3 kullanarak sıfırdan bir 3D dönen küp oluşturduk. Bu, CSS’in sadece görselleştirme değil aynı zamanda interaktif deneyimler sunmada da ne kadar güçlü olduğunu gösteriyor.

🧩 Sen bu tekniği hangi projende kullanmak isterdin?
Yorumlarda deneyimlerini paylaş! Yazıyı faydalı bulduysan sosyal medyada paylaşarak destek olabilirsin 💬