Tutorial: 3D Flip Cards - Moderne CSS Transforms

Tutorial: 3D Flip Cards - Moderne CSS Transforms

Übersicht Thema
Hinterlasse eine Bewertung

Moderne CSS Transforms - 3D Flip Cards​

zur Live-Demo auf rainlearn.de - 3D Flip Cards

Einleitung​

3D Flip Cards sind interaktive Elemente, die sich beim Hover um eine Achse drehen und eine Rückseite zeigen. Sie eignen sich perfekt für Portfolios, Teamvorstellungen oder Produktkarten und verleihen deiner Website einen modernen, dynamischen Touch.

1. perspective​

Definiert die Tiefe des 3D-Raums. Je kleiner der Wert, desto stärker der 3D-Effekt.
CSS: 
.card-container {
    perspective: 1000px;
}

2. transform-style: preserve-3d​

Ermöglicht es Kind-Elementen, im 3D-Raum positioniert zu werden.
CSS: 
.card {
    transform-style: preserve-3d;
}

3. backface-visibility: hidden​

Verhindert, dass die Rückseite einer gedrehten Fläche sichtbar ist.
CSS: 
.card-front,
.card-back {
    backface-visibility: hidden;
}

HTML-Struktur​

Die Struktur besteht aus drei Ebenen:
HTML: 
<div class="card-container">
    <div class="card">
        <div class="card-front">
            <!-- Vorderseite -->
        </div>
        <div class="card-back">
            <!-- Rückseite -->
        </div>
    </div>
</div>
  • card-container: Definiert die Perspektive
  • card: Das Element, das rotiert wird
  • card-front / card-back: Die beiden Seiten

CSS Schritt für Schritt​

Schritt 1: Container einrichten​

CSS: 
.card-container {
    perspective: 1000px;
    width: 300px;
    height: 400px;
}

Schritt 2: Die Karte vorbereiten​

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

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

Schritt 3: Vorder- und Rückseite positionieren​

CSS: 
.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
}

Die Rückseite wird um 180° vorgedreht, sodass sie beim Flip der Karte nach vorne kommt.

Wichtige Details​

Warum position: absolute?​

Beide Seiten müssen exakt übereinander liegen. Ohne position: absolute würden sie untereinander angeordnet.

Die Reihenfolge der Transforms​

Die Rückseite muss bereits um 180° gedreht sein (transform: rotateY(180deg)), damit beim Hover die richtige Seite erscheint.

Smooth Transitions​

Mit transition: transform 0.6s wird die Drehung animiert. Du kannst auch Timing-Funktionen wie ease-in-out oder cubic-bezier() verwenden.

Häufige Fehler​

  1. Vergessenes transform-style: preserve-3d: Ohne diese Eigenschaft funktioniert die 3D-Transformation nicht.
  2. Fehlende backface-visibility: hidden: Sonst scheint die Rückseite durch die Vorderseite durch.
  3. Falsche Positionierung: Beide Seiten müssen position: absolute haben.

Browser-Kompatibilität​

3D Transforms werden von allen modernen Browsern unterstützt. Für ältere Browser kannst du ein Fallback ohne 3D-Effekt bereitstellen.

Zusammenfassung​

Mit nur drei CSS-Eigenschaften kannst du beeindruckende 3D Flip Cards erstellen:
  • perspective für die 3D-Tiefe
  • transform-style: preserve-3d für den 3D-Raum
  • backface-visibility: hidden für saubere Rückseiten

Die Kombination aus HTML-Struktur und gezielten CSS-Transforms ermöglicht es dir, interaktive und moderne Kartenelemente zu gestalten, die deine Website aufwerten.

zur Live-Demo auf rainlearn.de - 3D Flip Cards
Autor
Rainchiller
Aufrufe
620
Erstellt am
Letzte Bearbeitung
Bewertung
0,00 Stern(e) 0 Bewertung(en)
Der Diskussion beitreten Weitere Informationen

Weitere Ressourcen von Rainchiller

Teilen

Zurück
Oben Unten