dijital dahi: 07-ZOOM-VE-FLIP-ODAKLANMALI-KART-EFEKTI

CANLI ÇALIŞMA ALANI

PRO KAMERA

📸

Sony Alpha 7 IV

33 MP Full-Frame Sensör

🔍 Yakınlaş ve döndür

Kamera Parametreleri

🎬 4K 60p 10-bit Video

🎯 759 Noktalı Hibrit AF

🔋 610 Çekim Pil Ömrü

💡 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 (Zoom & Flip Odaklanmalı 3D Kart Efekti), 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

.zoom-flip-wrap {   perspective: 1200px;   width: 280px;   height: 380px; } .zoom-flip-inner {   position: relative;   width: 100%;   height: 100%;   transform-style: preserve-3d;   transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);   cursor: pointer; } .zoom-flip-wrap:hover .zoom-flip-inner {   transform: scale(1.08) rotateY(180deg); } .zoom-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); } .zoom-front {   background: linear-gradient(135deg, #18181b 0%, #27272a 100%);   border: 1px solid rgba(255, 255, 255, 0.15);   color: #ffffff; } .zoom-badge {   background: #ea580c;   color: #fff;   font-size: 0.7rem;   font-weight: 800;   padding: 0.2rem 0.65rem;   border-radius: 20px; } .zoom-icon {   font-size: 4.5rem; } .zoom-back {   background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);   border: 1px solid rgba(255, 255, 255, 0.25);   color: #ffffff;   transform: rotateY(180deg); } .zoom-specs {   display: flex;   flex-direction: column;   gap: 8px;   font-size: 0.8rem;   text-align: left;   color: #ffedd5; }

⚡ JAVASCRIPT KODU ✏️ Düzenlenebilir

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

Bana modern web standartlarına (HTML5, CSS3, 3D Transform) tam uyumlu, hover yapıldığında önce kullanıcıya doğru büyüyen (scale up) ardından 180 derece dönerek detayları gösteren odaklanmalı 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.

07-ZOOM-VE-FLIP-ODAKLANMALI-KART-EFEKTI

Sony Alpha 7 IV

Kamera Parametreleri

Kayıtlı Favorilerim