3D-Flip-Card

Dies ist eine Flip-Card-UI-Komponente, die den Effekt hat, sich im 3D-Raum zu drehen. Durch Bewegen des Mauszeigers wird die Karte umgedreht, um den Inhalt auf der Rückseite sichtbar zu machen.

Vorschau

Front Side

Hover me to flip

Back Side

This is the back of the card

Code

<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 {
/* Legen Sie die Tiefe des 3D-Raums fest */
perspective: 1000px;
width: 300px;
height: 400px;
}

.flip-card {
width: 100%;
height: 100%;
position: relative;
/* Reibungslose Rotationsanimation */
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
/* 3D-Transformation auf untergeordnete Elemente anwenden */
transform-style: preserve-3d;
cursor: pointer;
}

/* Beim Schweben um 180 Grad um die Y-Achse drehen */
.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;
}