HTML, CSS et jQuery : créez une superbe carte à rabat en 3D-js tutoriel-php.cn

HTML, CSS et jQuery : créez une superbe carte à rabat en 3D

PHPz

Libérer： 2023-10-24 12:57:40

original

1614 Les gens l'ont consulté

HTML, CSS et jQuery : créez une superbe carte à rabat en 3D

HTML, CSS et jQuery : créez une carte à rabat 3D sympa

Dans la conception et le développement de sites Web, des effets sympas peuvent améliorer l'expérience utilisateur et rendre le site Web plus attrayant. Un effet sympa courant est celui des cartes à retourner en 3D. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un effet de carte à retourner 3D sympa et fournit des exemples de code spécifiques.

Tout d’abord, nous avons besoin d’une structure HTML pour contenir le contenu de la carte à retourner. Créons une page HTML simple et ajoutons les liens CSS et JavaScript nécessaires. Le code est le suivant :

<!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>

Copier après la connexion

Le code ci-dessus crée une carte simple contenant des éléments div pour deux panneaux, recto et verso. La classe card sera utilisée pour styliser le conteneur de la carte, la classe card-inner sera utilisée pour implémenter l'effet flip, et les classes card-front et card-back seront utilisées pour distinguer le recto et le verso.

Maintenant, ajoutons des styles CSS à la carte. Créez un fichier appelé style.css et ajoutez-y le code suivant :

.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;
}

Copier après la connexion

Le code ci-dessus stylise l'apparence et l'effet de retournement de la carte. En définissant la propriété perspective, nous pouvons ajouter de la profondeur à la carte. Utilisez l'attribut de transformation et l'attribut de transition pour obtenir l'effet de retournement. Le sélecteur card:hover .card-inner déclenchera le retournement de la carte au survol de la souris.

Enfin, nous devons utiliser jQuery pour initialiser la flip card. Créez un fichier appelé script.js et ajoutez-y le code suivant :

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

Copier après la connexion

Le code ci-dessus utilise la méthode toggleClass de jQuery pour ajouter ou supprimer la classe flip, déclenchant ainsi l'effet flip de la carte. Lorsque l'utilisateur clique sur la carte, celle-ci bascule entre le recto et le verso.

Nous avons maintenant terminé le code nécessaire pour créer une superbe carte à rabat en 3D. Enregistrez tous les fichiers dans le même dossier et ouvrez le fichier HTML dans votre navigateur et vous verrez une simple carte. Lorsque vous survolez ou cliquez sur une carte, elle la retournera en 3D pour afficher le recto et le verso.

J'espère que cet article vous sera utile pour apprendre le HTML, CSS et jQuery pour créer de superbes cartes à retourner en 3D ! N'hésitez pas à expérimenter en personnalisant les styles et en ajoutant plus de contenu aux cartes pour créer votre propre effet unique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!