Heim > Artikel > Web-Frontend > HTML, CSS und jQuery: Erstellen Sie eine coole 3D-Flipcard

HTML, CSS und jQuery: Erstellen Sie eine coole 3D-Flipcard

PHPzOriginal: 2023-10-24 12:57:401546Durchsuche

HTML, CSS und jQuery: Erstellen Sie eine coole 3D-Flipcard.

In Webdesign und -entwicklung können coole Effekte das Benutzererlebnis verbessern und die Website attraktiver machen. Ein häufiger cooler Effekt ist das 3D-Umdrehen von Karten. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery einen coolen 3D-Flip-Card-Effekt erstellen, und es werden spezifische Codebeispiele bereitgestellt.

Zuerst benötigen wir eine HTML-Struktur, um den Inhalt der Flip-Card aufzunehmen. Lassen Sie uns eine einfache HTML-Seite erstellen und die erforderlichen CSS- und JavaScript-Links hinzufügen. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <title>3D翻转卡片</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="card">
        <div class="card-inner">
            <div class="card-front">
                <h2>正面</h2>
            </div>
            <div class="card-back">
                <h2>背面</h2>
            </div>
        </div>
    </div>
</body>
</html>

Der obige Code erstellt eine einfache Karte mit div-Elementen für zwei Panels, Vorder- und Rückseite. Die Kartenklasse wird zum Gestalten des Kartenbehälters verwendet, die Karteninnenklasse wird zum Implementieren des Flip-Effekts verwendet und die Kartenvorder- und Kartenrückseitenklassen werden zur Unterscheidung von Vorder- und Rückseite verwendet.

Jetzt fügen wir der Karte CSS-Stile hinzu. Erstellen Sie eine Datei mit dem Namen style.css und fügen Sie den folgenden Code hinzu:

.card {
    width: 200px;
    height: 300px;
    perspective: 1000px;
}

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

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

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

.card-front {
    transform: rotateY(0deg);
    background-color: #3498db;
}

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

Der obige Code gestaltet das Erscheinungsbild und den Flip-Effekt der Karte. Durch Festlegen der Eigenschaft „Perspektive“ können wir der Karte etwas Tiefe verleihen. Verwenden Sie das Transformationsattribut und das Übergangsattribut, um den Flip-Effekt zu erzielen. Der Selektor „card:hover .card-inner“ löst beim Mouseover das Umdrehen der Karte aus.

Schließlich müssen wir jQuery verwenden, um die Flip-Karte zu initialisieren. Erstellen Sie eine Datei mit dem Namen script.js und fügen Sie den folgenden Code hinzu:

$(document).ready(function() {
    $('.card').click(function() {
        $(this).find('.card-inner').toggleClass('flip');
    });
});

Der obige Code verwendet die toggleClass-Methode von jQuery, um die Flip-Klasse hinzuzufügen oder zu entfernen und dadurch den Flip-Effekt der Karte auszulösen. Wenn der Benutzer auf die Karte klickt, wechselt sie zwischen Vorder- und Rückseite.

Jetzt haben wir den Code fertiggestellt, der zum Erstellen einer coolen 3D-Flip-Card erforderlich ist. Speichern Sie alle Dateien im selben Ordner und öffnen Sie die HTML-Datei in Ihrem Browser. Sie sehen eine einfache Karte. Wenn Sie mit der Maus über eine Karte fahren oder darauf klicken, wird sie in 3D umgedreht, um die Vorder- und Rückseite anzuzeigen.

Ich hoffe, dass dieser Artikel Ihnen dabei hilft, HTML, CSS und jQuery zu lernen, um coole 3D-Flip-Cards zu erstellen! Experimentieren Sie ruhig mit der Anpassung der Stile und dem Hinzufügen weiterer Inhalte zu den Karten, um Ihren eigenen, einzigartigen Effekt zu erzielen.

Das obige ist der detaillierte Inhalt vonHTML, CSS und jQuery: Erstellen Sie eine coole 3D-Flipcard. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css html JS 选择器 transform transition

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie eine responsive Website mit HTML, CSS und jQueryNächster Artikel：So erstellen Sie eine responsive Website mit HTML, CSS und jQuery

In Verbindung stehende Artikel

Mehr sehen