3D Flip Kart

Bu, 3B alanda dönme etkisine sahip bir çevirmeli kart kullanıcı arayüzü bileşenidir. Fareyle üzerine gelindiğinde, arkadaki içeriği ortaya çıkarmak için kartı ters çevirir.

Önizleme

Front Side

Hover me to flip

Back Side

This is the back of the card

Kod

<div class="flip-card-container">
<div class="flip-card">
  <div class="flip-card-front">
    <div class="card-content">
      <h3>Front Side</h3>
      <p>Hover me to flip</p>
    </div>
  </div>
  <div class="flip-card-back">
    <div class="card-content">
      <h3>Back Side</h3>
      <p>This is the back of the card</p>
    </div>
  </div>
</div>
</div>

.flip-card-container {
/* 3B alanın derinliğini ayarlama */
perspective: 1000px;
width: 300px;
height: 400px;
}

.flip-card {
width: 100%;
height: 100%;
position: relative;
/* Düzgün döndürme animasyonu */
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
/* Alt öğelere 3 boyutlu dönüşüm uygula */
transform-style: preserve-3d;
cursor: pointer;
}

/* Fareyle üzerine gelindiğinde Y ekseni etrafında 180 derece döndürün */
.flip-card-container:hover .flip-card {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
width: 100%;
height: 100%;
position: absolute;
/* Hide element when flipped */
backface-visibility: hidden;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
background: white;
color: #333;
}

/* Rotate back element 180 degrees initially */
.flip-card-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, #6366f1, #a855f7);
color: white;
}

.card-content h3 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}

.card-content p {
margin: 0;
font-size: 1rem;
opacity: 0.9;
}