Flip-Cards mit HTML, CSS und JavaScript erstellen

Für meine Zertifizierungsseite war ich auf der Suche nach einer einfachen Möglichkeit, meine Herstellerzertifizierungen übersichtlich und mit zusätzlichen Informationen darzustellen. Dafür muss es nicht zwangsläufig eine komplexe Lösung oder ein zusätzliches WordPress-Plugin sein. In diesem Beitrag zeige ich, wie sich responsive Flip-Cards mit HTML, CSS und JavaScript umsetzen lassen.

Ausgangslage

Bisher habe ich meine Herstellerzertifizierungen mithilfe eines WordPress-Plugins in Form eines Sliders dargestellt. Diese Lösung hat ihren Zweck erfüllt, gefällt mir inzwischen jedoch nicht mehr.

Durch den Slider ist immer nur ein Teil der vorhandenen Zertifizierungen sichtbar. Zudem bietet die Darstellung wenig Raum für zusätzliche Informationen zu den einzelnen Zertifikaten. Um sich einen vollständigen Überblick zu verschaffen, muss daher zunächst durch die verschiedenen Einträge navigiert werden.

Anforderungen

Die neue Darstellung soll alle Zertifizierungen direkt und übersichtlich auf einer Seite zeigen. Gleichzeitig möchte ich wichtige Metadaten wie den aktuellen Status und das Erwerbsdatum hinterlegen, ohne die Übersicht mit zusätzlichen Informationen zu überladen.

Daraus ergeben sich folgende Anforderungen:

alle Zertifizierungen auf einen Blick
übersichtliche und responsive Darstellung
Zertifizierungs-Badge im Vordergrund
zusätzliche Informationen bei Bedarf
komfortable Bedienung per Maus, Touch und Tastatur
keine zusätzliche Plugin-Abhängigkeit

Für die Umsetzung bieten sich Flip-Cards an. Auf der Vorderseite steht das jeweilige Zertifizierungs-Badge im Mittelpunkt. Mit einem Klick dreht sich die Karte und zeigt auf der Rückseite die zugehörigen Informationen.

Auch hierfür gibt es entsprechende WordPress-Plugins. Da die Anforderungen technisch überschaubar sind, möchte ich jedoch bewusst auf eine weitere Plugin-Abhängigkeit verzichten und die Lösung ausschließlich mit HTML, CSS und JavaScript umsetzen.

Umsetzung

Eine Flip-Card besteht aus einem äußeren Container sowie einer Vorder- und Rückseite:

flip-card
└── flip-card-inner
    ├── flip-card-front
    └── flip-card-back

Das innere Element wird beim Wechsel zwischen Vorder- und Rückseite um 180° gedreht. Auf meiner Zertifizierungsseite befindet sich auf der Vorderseite das jeweilige Badge, während die Rückseite die zugehörigen Informationen enthält.

Die Komponente ist bewusst generisch aufgebaut und kann daher auch für Projekte, Produkte, Teammitglieder oder andere Inhalte verwendet werden.

HTML

Eine einzelne Flip-Card wird mit folgendem HTML aufgebaut:

<div class="flip-card"
     tabindex="0"
     role="button"
     aria-label="Details anzeigen">

    <div class="flip-card-inner">

        <div class="flip-card-front">
            <img src="images/example.jpg"
                 alt="Beispielbild">

            <span class="flip-card-hint">
                Details
            </span>
        </div>

        <div class="flip-card-back">

            <span class="flip-card-category">
                Kategorie
            </span>

            <p class="flip-card-title">
                Titel
            </p>

            <p class="flip-card-description">
                Kurze Beschreibung
            </p>

            <div class="flip-card-meta">

                <div class="flip-card-meta-row">
                    <span class="flip-card-meta-label">
                        Status
                    </span>
                    <span class="flip-card-meta-value">
                        Aktiv
                    </span>
                </div>

                <div class="flip-card-meta-row">
                    <span class="flip-card-meta-label">
                        Erstellt
                    </span>
                    <span class="flip-card-meta-value">
                        09/2026
                    </span>
                </div>

            </div>

            <span class="flip-card-back-hint">
                Zurück
            </span>

        </div>

    </div>

</div>

Weitere Karten können später einfach durch Kopieren dieses Blocks ergänzt und mit den jeweiligen Inhalten versehen werden.

CSS

Die Darstellung und die eigentliche Flip-Animation werden vollständig mit CSS umgesetzt. Vorder- und Rückseite liegen dabei übereinander. Über die Klasse is-flipped wird das innere Element um 180° gedreht.

.flip-card {
    position: relative;
    width: 280px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    perspective: 1200px;
    cursor: pointer;
    outline: none;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.55s ease;
    transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    padding: 24px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.flip-card-front {
    background: #fff;
    transition: box-shadow 0.25s ease;
}

.flip-card:hover .flip-card-front {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.flip-card-front img {
    display: block;
    width: 82%;
    height: 82%;
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
}

.flip-card-hint {
    position: absolute;
    right: 14px;
    bottom: 11px;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;

    color: #777;
    opacity: 0;

    transition: opacity 0.2s ease;
}

.flip-card:hover .flip-card-hint,
.flip-card:focus .flip-card-hint {
    opacity: 1;
}

.flip-card-back {
    background: #182436;
    color: #fff;
    text-align: center;
    transform: rotateY(180deg);
}

.flip-card-category {
    margin-bottom: 10px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.12em;

    color: rgba(255, 255, 255, 0.65);
}

.flip-card-title {
    margin: 0 0 10px;
    padding: 0;

    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;

    color: #fff;
}

.flip-card-description {
    margin: 0 0 18px;
    padding: 0;

    font-size: 0.9rem;
    line-height: 1.5;

    color: rgba(255, 255, 255, 0.85);
}

.flip-card-meta {
    width: 100%;
    max-width: 210px;
    margin-top: 2px;

    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.flip-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
    padding: 8px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

    font-size: 0.82rem;
    line-height: 1.4;
}

.flip-card-meta-label {
    color: rgba(255, 255, 255, 0.60);
}

.flip-card-meta-value {
    color: #fff;
    font-weight: 600;
    text-align: right;
}

.flip-card-back-hint {
    position: absolute;
    right: 14px;
    bottom: 11px;

    font-size: 11px;
    letter-spacing: 0.04em;

    color: rgba(255, 255, 255, 0.5);
}

.flip-card:focus-visible {
    border-radius: 14px;
    outline: 2px solid #182436;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .flip-card-inner {
        transition: none;
    }
}

Farben, Abstände, Größe und Seitenverhältnis können anschließend an das Design der eigenen Website angepasst werden.

JavaScript

JavaScript wird lediglich benötigt, um beim Anklicken der Karte die CSS-Klasse is-flipped hinzuzufügen beziehungsweise wieder zu entfernen.

document.addEventListener('DOMContentLoaded', function () {

    const cards = document.querySelectorAll('.flip-card');

    cards.forEach(function (card) {

        card.addEventListener('click', function () {
            card.classList.toggle('is-flipped');
        });

        card.addEventListener('keydown', function (event) {

            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                card.classList.toggle('is-flipped');
            }

        });

    });

});

Damit funktioniert die Interaktion nicht nur mit Maus und Touchscreen, sondern auch über Enter oder die Leertaste.

Mehrere Flip-Cards als Grid

Für meine Zertifizierungsseite benötige ich natürlich mehr als eine Karte. Die einzelnen Flip-Cards lassen sich dafür mit einem zusätzlichen Container zusammenfassen:

<div class="flip-card-grid">

    <!-- Flip-Card -->
    <div class="flip-card">
        ...
    </div>

    <!-- Flip-Card -->
    <div class="flip-card">
        ...
    </div>

</div>

Die responsive Anordnung übernimmt CSS Grid:

.flip-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.flip-card-grid .flip-card {
    width: 100%;
}

@media (max-width: 1000px) {
    .flip-card-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .flip-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .flip-card-grid {
        grid-template-columns: 1fr;
    }
}

Damit werden abhängig von der verfügbaren Bildschirmbreite vier, drei, zwei oder eine Karte pro Zeile dargestellt.

Integration in WordPress

Ich verwende die Flip-Cards auf meiner Zertifizierungsseite innerhalb des Gutenberg-Editors. Dort lassen sich HTML, CSS und JavaScript getrennt voneinander in den jeweils dafür vorgesehenen Bereichen hinterlegen.

Der HTML-Bereich enthält die eigentliche Struktur und die Inhalte der Flip-Cards. Das CSS übernimmt die Gestaltung, das responsive Grid sowie die Flip-Animation, während das JavaScript die Interaktion beim Anklicken beziehungsweise über die Tastatur steuert.

CSS und JavaScript müssen dabei nur einmal eingebunden werden. Weitere Flip-Cards können anschließend einfach durch zusätzliche HTML-Blöcke ergänzt werden.

Details

Fortinet

NSE 7

Secure Networking

Status –

Erworben –

Zurück

Fazit

Mit der neuen Darstellung sind alle Zertifizierungen direkt sichtbar, während zusätzliche Informationen erst bei Bedarf eingeblendet werden. Dadurch bleibt die Seite übersichtlich, ohne auf relevante Metadaten verzichten zu müssen.

Gleichzeitig zeigt die Umsetzung, dass für kleinere interaktive Funktionen nicht immer ein zusätzliches WordPress-Plugin notwendig ist. Mit etwas HTML, CSS und JavaScript lässt sich eine schlanke Lösung umsetzen, die sich gezielt an die eigenen Anforderungen anpassen lässt.

Für meinen Anwendungsfall ersetzen die Flip-Cards damit den bisherigen Slider und reduzieren gleichzeitig die Anzahl der eingesetzten Plugins.