3D-Karten-Flip-Effekt

Eine Karte mit einem beeindruckenden 3D-Flip-Effekt beim Hover.

Demo

Vorderseite

Hover über diese Karte

Rückseite

Toller 3D-Effekt!

Code

HTML
CSS
JavaScript
<div class="flip-card-container">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <h3>Vorderseite</h3>
        <p>Hover über diese Karte</p>
      </div>
      <div class="flip-card-back">
        <h3>Rückseite</h3>
        <p>Toller 3D-Effekt!</p>
      </div>
    </div>
  </div>
</div>
.flip-card-container {
  perspective: 1000px;
  width: 250px;
  height: 200px;
}

.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  cursor: pointer;
}

.flip-card-container:hover .flip-card {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.flip-card-front {
  background-color: #f8f9fa;
  color: #333;
}

.flip-card-back {
  background-color: #3498db;
  color: #fff;
  transform: rotateY(180deg);
}

Erklärung

Diese 3D-Karte verwendet CSS-Transformationen, um einen realistischen Flip-Effekt zu erzeugen.

Die wichtigsten Eigenschaften sind:

  • perspective: 1000px; - Gibt dem Container eine 3D-Perspektive
  • transform-style: preserve-3d; - Behält den 3D-Raum für verschachtelte Elemente bei
  • backface-visibility: hidden; - Versteckt die Rückseite der Elemente bei der Rotation
  • transform: rotateY(180deg); - Dreht die Karte auf der Y-Achse

Beide Seiten der Karte sind absolut positioniert und übereinander gestapelt, aber die Rückseite beginnt bereits umgedreht.

Verwendung

Verwende diesen Effekt für interaktive Informationskarten, Teammitgliederprofile oder Produktkarten, um mehr Informationen auf begrenztem Raum zu zeigen.