dijital dahi: 12-SPIRAL-HELIKOPTER-3D-FLIP-DRONE-KARTI

CANLI ÇALIŞMA ALANI

4K 120FPS

🛸

Mavic Pro Quadcopter

Hasselblad Kameralı Drone

🌀 Helikopter dönüşü için gelin

Uçuş Özellikleri

📡 Menzil: 15 Kilometre

🔋 Uçuş Süresi: 46 Dakika

🌪️ Rüzgar Direnci: 12 m/s

💡 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 (Spiral Helikopter 3D Flip Drone 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

.drone-card-wrap {   perspective: 1200px;   width: 280px;   height: 380px; } .drone-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; } .drone-card-wrap:hover .drone-card-inner {   transform: rotateZ(360deg) rotateY(180deg); } .drone-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); } .drone-front {   background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);   border: 1px solid rgba(255, 255, 255, 0.15);   color: #ffffff; } .drone-badge {   background: #0284c7;   color: #fff;   font-size: 0.7rem;   font-weight: 800;   padding: 0.2rem 0.65rem;   border-radius: 20px; } .drone-icon {   font-size: 4.5rem; } .drone-back {   background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);   border: 1px solid rgba(255, 255, 255, 0.25);   color: #ffffff;   transform: rotateY(180deg); } .drone-specs {   display: flex;   flex-direction: column;   gap: 8px;   font-size: 0.8rem;   text-align: left;   color: #e0f2fe; }

⚡ JAVASCRIPT KODU ✏️ Düzenlenebilir

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

Bana modern web standartlarına (HTML5, CSS3, 3D Transform) tam uyumlu, kendi ekseni etrafında spiral çizerek dönen helikopter/drone pervanesi akışkanlığında 3D dönen 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.

12-SPIRAL-HELIKOPTER-3D-FLIP-DRONE-KARTI

Mavic Pro Quadcopter

Uçuş Özellikleri

Kayıtlı Favorilerim