Pour créer un effet CSS Flip Card, utilisez d'abord une structure HTML pour inclure les c?tés avant et arrière, puis utilisez CSS pour obtenir un flip 3D. 1. Créez une structure HTML contenant .Card-container, .card, .card-front et .card-back; 2. Définissez la perspective de la containeur de cartes dans CSS pour créer un espace 3D, définir les effets de style transform: préserver-3D et transition pour la carte. 3. Définissez le positionnement absolu pour .Card-front et .card-back, backface-visibilité: caché et initialement pivoter. CARDE-Back 180 degrés pour afficher correctement le contenu; 4. En éventuellement, ajoutez la fonction de flip cliquez via JavaScript, remplacez: Hover par la classe .flipped pour déclencher Flip; 5. Les suggestions d'optimisation incluent l'utilisation d'images d'arrière-plan, l'ajustement des temps de transition, la prise en charge des interactions mobiles et, en fin de compte, la réalisation d'un effet de retournement lisse et visuellement attrayant.

La création d'un effet de carte de fting avec CSS est un excellent moyen d'ajouter une interaction et un attrait visuel à vos projets Web, comme pour les galeries d'images, les cartes de produits ou les cartes de profil. L'effet montre généralement un c?té d'une carte (avant), et lorsqu'il a survolé (ou cliqué), il se retourne pour révéler le c?té arrière.

Voici comment construire un effet de carte de retournement 3D lisse en utilisant HTML et CSS uniquement .

? 1. Structure HTML de base

Commencez avec un conteneur pour la carte et deux divs intérieurs pour les faces avant et arrière:

 <div class = "card-container">
  <div class = "card">
    <div class = "card-front">
      <h3> Front c?té </h3>
      <p> survolez-vous pour retourner! </p>
    </div>
    <div class = "card-back">
      <h3> c?té arrière </h3>
      <p> Surprise Contenu! </p>
    </div>
  </div>
</div>

? 2. CSS pour l'effet de retournement

La clé du FLIP utilise les transformations 3D et transform-style: preserve-3d sur le parent, avec backface-visibility: hidden sur les faces.

 .Card-container {
  Largeur: 200px;
  hauteur: 300px;
  Perspective: 1000px; / * Crée un espace 3D * /
}

.carte {
  Position: relative;
  Largeur: 100%;
  hauteur: 100%;
  style transform: Preserve-3d;
  transition: transformer 0,6 s facilité;
}

.Card-Container: Hover .Card {
  transformée: Rotatey (180deg);
}

carde-front,
.Card-back {
  Position: absolue;
  Largeur: 100%;
  hauteur: 100%;
  backface-visibilité: caché;
  Border-Radius: 10px;
  Affichage: flex;
  Flex-Direction: colonne;
  Justification-contenu: centre;
  Align-Items: Centre;
  rembourrage: 20px;
  Dimensionnement en bo?te: Border-Box;
  Font-Family: Arial, Sans-Serif;
  Couleur: blanc;
  Texte-aligne: Centre;
}

.Card-front {
  Color d'arrière-plan: # 3498db;
  taille arrière: couverture;
  Position d'arrière-plan: Centre;
}

.Card-back {
  Color d'arrière-plan: # E74C3C;
  transformée: Rotatey (180deg);
}

? Concepts clés expliqués

• perspective sur .card-container :
  Cela donne de la profondeur à la transformation 3D. Une valeur inférieure rend le flip plus dramatique.

  

• transform-style: preserve-3d sur .card :
  S'assure que les éléments enfants (avant / dos) existent dans l'espace 3D, non aplatis.

• backface-visibility: hidden :
  Cache le dos de chaque visage lorsqu'il est face (évite de voir du contenu miroir).

• rotateY(180deg) sur plané :
  Faire tourner la carte entière à 180 degrés autour de l'axe y pour montrer le dos.

• transform: rotateY(180deg) sur .card-back :
  Commence la face arrière déjà retournée, il appara?t correctement lorsque la carte tourne.

? ? Facultatif: cliquez pour retourner (sur le plan de volant)

Si vous voulez un flip basé sur un clic (par exemple, sur mobile), utilisez un petit javascript:

 document.QuerySelector ('. Card-Container'). AddEventListener ('click', function () {
  this.classList.toggle ('flipplip');
});

Modifiez ensuite la règle CSS en survol de CSS en:

 .card-contrainer.flipplip .card {
  transformée: Rotatey (180deg);
}

? Conseils pour de meilleurs résultats

• Utilisez des images ou des gradients pour plus d'impact visuel.
• Ajustez le timing transition pour les effets plus lisses ou de vivaneau.
• Vous pouvez retourner sur l'axe X ( rotateX ) pour un retournement vertical.
• Tester sur mobile - considéré à l'aide de zones cursor: pointer ou de robinet.

C'est ?a! Avec seulement quelques lignes de CSS, vous avez une carte de renversement de sommeil. Ce n'est pas complexe, mais l'effet 3D le fait se sentir empoisonné.

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!