dijital dahi: 15-IZOMETRIK-KUP-KOSESINDEN-DONEN-FLIP-KARTI

CANLI ÇALIŞMA ALANI

99.99% UPTIME

☁️

Cloud VPS Node-01

Yüksek Performanslı Bulut Sunucu

🧊 Küp dönüşü için gelin

Donanım Kaynakları

⚡ 16 vCPU İşlemci

🧠 64 GB DDR5 RAM

💾 2 TB NVMe SSD Depolama

💡 Kartın üzerine gelerek (hover) veya dokunarak 3D dönüşü test edin. Sağdaki kodları anında düzenleyebilirsiniz.

💡 Bileşen Analizi & Kullanım Alanları

Bu medya oynatıcı bileşeni (İzometrik Küp Köşesinden Dönen 3D Flip Kart), şarkı adı, oynatma çubuğu, albüm kapağı ve kontrol tuşlarını estetik bir cam panelde birleştiren modern bir müzik/podcast widget'ıdır.

🚀 Nerelerde ve Nasıl Kullanılır?

Sanatçı & Albüm Tanıtımları: Müzisyen web sitelerinde en popüler parçaları veya albüm önizlemelerini dinletmek için kullanabilirsiniz.
Podcast & Sesli Bloglar: Blog yazılarınızın sesli anlatımını (Audio Article) ziyaretçilere sunmak için yazının başına ekleyebilirsiniz.
Oyun & Medya Siteleri: Arka plan müzik kontrolü sağlayan mini bir oynatıcı olarak sayfanın köşesine sabitleyebilirsiniz.

🎨 Özelleştirme & Geliştirici İpuçları:

Gerçek HTML5 Audio Entegrasyonu: JS kutusundaki fonksiyonlara gerçek bir .mp3 URL'si bağlayarak tam çalışan bir oynatıcıya dönüştürebilirsiniz.
Dalga (Waveform) Animasyonu: CSS keyframe değerlerini düzenleyerek çalan müziğe göre hareket eden frekans çubukları ekleyebilirsiniz.

🌐 HTML KODU ✏️ Düzenlenebilir

🎨 CSS KODU ✏️ Düzenlenebilir

.cube-card-wrap {   perspective: 1200px;   width: 280px;   height: 380px; } .cube-card-inner {   position: relative;   width: 100%;   height: 100%;   transform-style: preserve-3d;   transition: transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);   cursor: pointer; } .cube-card-wrap:hover .cube-card-inner {   transform: rotateY(180deg) rotateX(15deg); } .cube-face {   position: absolute;   inset: 0;   -webkit-backface-visibility: hidden;   backface-visibility: hidden;   border-radius: 20px;   padding: 1.75rem 1.25rem;   box-sizing: border-box;   display: flex;   flex-direction: column;   align-items: center;   justify-content: space-between;   text-align: center;   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); } .cube-front {   background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);   border: 1px solid rgba(255, 255, 255, 0.15);   color: #ffffff; } .cube-badge {   background: #10b981;   color: #000;   font-size: 0.7rem;   font-weight: 800;   padding: 0.2rem 0.65rem;   border-radius: 20px; } .cube-icon {   font-size: 4.5rem; } .cube-back {   background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);   border: 1px solid rgba(255, 255, 255, 0.25);   color: #ffffff;   transform: rotateY(180deg); } .cube-specs {   display: flex;   flex-direction: column;   gap: 8px;   font-size: 0.8rem;   text-align: left;   color: #e0e7ff; }

⚡ JAVASCRIPT KODU ✏️ Düzenlenebilir

🤖 YAPAY ZEKA (AI) PROMPTU ChatGPT / Claude / v0

Bana modern web standartlarına (HTML5, CSS3, 3D Transform) tam uyumlu, izometrik 3D küp görünümünde, köşesinden çevrilerek farklı yüzeyleri gösteren derinlikli 3D kart oluştur. Koyu tema arka planı (Dark Mode), akıcı transform-style: preserve-3d dönüşü, yumuşak gölgeler ve mobil dokunmatik desteği içersin.

💡 Nasıl Kullanılır? Promptu kopyalayıp ChatGPT, Claude veya Cursor'a yapıştırarak bu 3D kartı projenize göre özelleştirebilirsiniz.

15-IZOMETRIK-KUP-KOSESINDEN-DONEN-FLIP-KARTI

Cloud VPS Node-01

Donanım Kaynakları

Kayıtlı Favorilerim