dijital dahi: 03-CIFT-KAPILI-DOLAP-ACILISLI-FLIP-KARTI

CANLI ÇALIŞMA ALANI

ÖZEL HEDİYE

🎁

KOD: DAHI50

%50 İndirim Kuponu Kazandınız!

GİZLİ

KASA

💡 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 3 boyutlu interaktif kart (Çift Kapılı Dolap Açılışlı 3D Flip Kart), CSS3 3D perspektif dönüşümleri (transform: rotateX / rotateY) ile zenginleştirilmiş, kullanıcı etkileşimini maksimuma çıkaran bir UI kartıdır.

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

E-Ticaret & Ürün Sergileme: Kartın ön yüzünde ürün fotoğrafını, arka yüzünde ise fiyat ve 'Satın Al' butonunu göstererek yerden tasarruf sağlayabilirsiniz.
Portfolyo & Takım Üyeleri: Ekip üyelerinin fotoğrafı ve üzerine gelindiğinde/tıklandığında açılan sosyal medya detayları için mükemmeldir.
Oyunlaştırma & Rozetler: Ödül kartları, kazı-kazan veya dijital VIP pasaport vitrinlerinde dikkat çekici bir görsel sunar.

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

Dönüş Açısı ve Hızı: CSS'teki transition: 0.6s süresini ve rotasyon açısını (180deg / 360deg) ayarlayarak animasyon dinamiğini belirleyebilirsiniz.
Işık & Gölge: box-shadow değerlerini zenginleştirerek 3D derinlik vurgusunu daha da keskinleştirebilirsiniz.

🌐 HTML KODU ✏️ Düzenlenebilir

🎨 CSS KODU ✏️ Düzenlenebilir

.cabinet-card-wrap {   perspective: 1200px;   position: relative;   width: 280px;   height: 380px;   border-radius: 20px;   overflow: hidden;   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); } .cabinet-background-content {   position: absolute;   inset: 0;   background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);   padding: 1.75rem 1.25rem;   display: flex;   flex-direction: column;   align-items: center;   justify-content: space-between;   text-align: center;   box-sizing: border-box; } .cab-prize-badge {   background: #f59e0b;   color: #000;   font-size: 0.72rem;   font-weight: 800;   padding: 0.2rem 0.75rem;   border-radius: 20px; } .cab-prize-icon {   font-size: 4rem; } .cab-prize-code {   font-family: Consolas, monospace;   font-size: 1.2rem;   font-weight: 800;   color: #38bdf8;   background: rgba(0,0,0,0.4);   padding: 4px 12px;   border-radius: 8px; } .cabinet-door {   position: absolute;   top: 0;   bottom: 0;   width: 50%;   background: linear-gradient(135deg, #334155, #1e293b);   border: 1px solid rgba(255,255,255,0.15);   box-sizing: border-box;   display: flex;   align-items: center;   justify-content: center;   transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);   z-index: 2; } .door-left {   left: 0;   transform-origin: left center;   border-right: 2px solid #0f172a; } .door-right {   right: 0;   transform-origin: right center;   border-left: 2px solid #0f172a; } .cabinet-card-wrap:hover .door-left {   transform: rotateY(-130deg); } .cabinet-card-wrap:hover .door-right {   transform: rotateY(130deg); } .door-text {   font-size: 0.95rem;   font-weight: 800;   color: #94a3b8;   letter-spacing: 2px; }

⚡ JAVASCRIPT KODU ✏️ Düzenlenebilir

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

Bana modern web standartlarına (HTML5, CSS3, 3D Transform) tam uyumlu, hover edildiğinde iki yana dolap kapağı gibi açılarak arkasındaki gizli içeriği gösteren çift kanatlı 3D kart efekti 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.

03-CIFT-KAPILI-DOLAP-ACILISLI-FLIP-KARTI

Kayıtlı Favorilerim