In diesem Beitrag erfahren Sie, wie Sie mithilfe von HTML und CSS eine stilvolle 3D-Flipcard-Animation mit Verlaufshintergründen erstellen.

Besuchen Sie meine Website

Die Struktur verstehen

Wir werden zwei Seiten für die Karte verwenden – Vorder- und Rückseite –, um einen Wendeeffekt zu erzielen. Dieser Effekt wird beim Hover mithilfe von CSS-Übergängen aktiviert.

    

      
Front Side
    
    

      
Back Side
    

Diese einfache HTML-Struktur enthält ein div-Element mit zwei Seiten: eine für die Vorderseite und eine für die Rückseite.

.card {
    perspective: 150rem;
    position: relative;
    height: 40rem;
    max-width: 400px;
    margin: 2rem;
    box-shadow: none;
    background: none;
  }

.card-side {
    height: 35rem;
    border-radius: 15px;
    transition: all 0.8s ease;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    padding: 2rem;
    color: white;
}

.card-side.back {
    transform: rotateY(-180deg);
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%,#FFCC70 100%);
}

.card-side.front {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.card:hover .card-side.front {
    transform: rotateY(180deg);
}

.card:hover .card-side.back {
    transform: rotateY(0deg);
}

Live-Demo

backface-visibility: Versteckt den Inhalt auf der Rückseite der Karte, wenn die Vorderseite sichtbar ist, und umgekehrt.

Setzen Sie rotationY() für die Rückseite der Karte auf -180 Grad und die Vorderseite auf 0 Grad.

Perspektive: Fügt dem 3D-Effekt Tiefe hinzu, indem die Karte so aussieht, als würde sie sich im Raum drehen.

Stellen Sie beim Bewegen des Mauszeigers „rotateY()“ für die Vorderseite auf 180 Grad und die Rückseite auf 0 Grad ein.

Abschluss

Mit nur wenigen Zeilen HTML und CSS können Sie eine atemberaubende 3D-Flip-Card-Animation erstellen, die Ihrer Website eine dynamische Note verleiht. Versuchen Sie, mit Farben und Effekten zu experimentieren, um es einzigartig zu machen