Um einen CSS -Flip -Card -Effekt zu erstellen, verwenden Sie zun?chst eine HTML -Struktur, um die vorderen und hinteren Seiten zu enthalten, und dann CSS, um 3D -Flip zu erreichen. 1. Erstellen Sie eine HTML-Struktur, die .Card-Container, .card, .Card-Front und .Card-Back enth?lt; 2. Setzen Sie die Perspektive für .Kard-Container in CSS, um 3D-Raum zu schaffen, ein Transformationsstil zu setzen: Preserve-3D- und übergangseffekte für .card und wenden Sie Rotatey (180 Grad) an, um Flip zu erreichen, wenn: schwebe; 3.. Setzen Sie die absolute Positionierung für .Kard-Front und .Card-Back, Backface-Sicht: Versteckt und zun?chst. 4. Fügen Sie optional klicken Sie über JavaScript auf Flip -Funktion hinzu, ersetzen Sie: Schweben Sie mit der .Fliped -Klasse, um Flip auszul?sen. 5. Optimierungsvorschl?ge umfassen die Verwendung von Hintergrundbildern, die Anpassung der übergangszeiten und die Unterstützung mobiler Interaktionen, um letztendlich einen reibungslosen und visuell attraktiven Flip -Effekt zu erzielen.

Das Erstellen eines Fingkarteneffekts mit CSS ist eine gro?artige M?glichkeit, Ihren Webprojekten Interaktion und visuelle Anziehungskraft hinzuzufügen - wie für Bildgalerien, Produktkarten oder Profilkarten. Der Effekt zeigt typischerweise eine Seite einer Karte (vorne), und wenn sie schwebend (oder geklickt), flieht er, um die Rückseite anzuzeigen.

Hier erfahren Sie, wie Sie einen glatten 3D -Flipping -Karteneffekt nur mit HTML und CSS erstellen.

? 1. Grundlegende HTML -Struktur

Beginnen Sie mit einem Beh?lter für die Karte und zwei innere Divs für die Vorder- und Rückseite:

 <div class = "card-container">
  <div class = "card">
    <div class = "karten-front">
      <h3> Vorderseite </h3>
      <p> schweben Sie zum Flip! </p>
    </div>
    <div class = "card-back">
      <h3> Rückseite </h3>
      <p> überraschungsinhalt! </p>
    </div>
  </div>
</div>

? 2. CSS für den Flip -Effekt

Der Schlüssel zum Flip verwendet 3D-Transformationen und transform-style: preserve-3d auf dem übergeordneten, zusammen mit backface-visibility: hidden auf den Gesichtern.

 .Card-Container {
  Breite: 200px;
  H?he: 300px;
  Perspektive: 1000px; / * Erstellt 3D -Raum */
}

.Card {
  Position: Relativ;
  Breite: 100%;
  H?he: 100%;
  Transform-Stil: Preserve-3d;
  übergang: 0,6 Sekunden transformieren;
}

.Card-Container: Hover .card {
  Transformation: Rotatey (180 Grad);
}

.Card-Front,
.Card-back {
  Position: absolut;
  Breite: 100%;
  H?he: 100%;
  Backface-Sichtbarkeit: versteckt;
  Border-Radius: 10px;
  Anzeige: Flex;
  Flex-Richtung: S?ule;
  Justify-Content: Center;
  Ausrichtung: Zentrum;
  Polsterung: 20px;
  Kastengr??en: Border-Box;
  Schriftfamilie: Arial, Sans-Serif;
  Farbe: wei?;
  Text-Align: Mitte;
}

.Card-Front {
  Hintergrundfarbe: #3498db;
  Hintergrundgr??e: Cover;
  Hintergrundposition: Zentrum;
}

.Card-back {
  Hintergrundfarbe: #e74c3c;
  Transformation: Rotatey (180 Grad);
}

? Schlüsselkonzepte erkl?rt

• perspective auf .card-container :
  Dies verleiht der 3D -Transformation Tiefe. Ein niedrigerer Wert macht den Flip dramatischer.

  

• transform-style: preserve-3d on .card :
  Stellt sicher, dass Kinderelemente (vorne/hinten) im 3D -Raum existieren, nicht abgeflacht.

• backface-visibility: hidden :
  Versteckt die Rückseite jedes Gesichts, wenn es weg ist (vermeidet es, verspiegelte Inhalte zu sehen).

• rotateY(180deg) auf schweber :
  Dreht die gesamte Karte 180 Grad um die Y-Achse, um den Rücken zu zeigen.

• transform: rotateY(180deg) auf .card-back :
  Startet die bereits umgedrehte Rückseite, sodass es korrekt angezeigt wird, wenn sich die Karte dreht.

? ? optional: Klicken Sie zum Flip (über von schweber).

Wenn Sie einen klickbasierten Flip (z. B. auf Mobiltelefon) m?chten, verwenden Sie ein wenig JavaScript:

 Document.querySelector ('. Card-Container'). AddEventListener ('Click', Function () {
  this.classList.toggle ('geflippt');
});

?ndern Sie dann die CSS -Schweberegel in:

 .Card-container.flipped .card {
  Transformation: Rotatey (180 Grad);
}

? Tipps für bessere Ergebnisse

• Verwenden Sie Bilder oder Gradienten, um mehr visuelle Wirkung zu erzielen.
• Passen Sie den transition für glattere oder Schnappereffekte an.
• Sie k?nnen die X-Achse ( rotateX ) für einen vertikalen Flip aufbl?ttern.
• Testen Sie auf Mobilger?ten - Konten Sie mit cursor: pointer oder Tap -Zonen.

Das war's! Mit nur ein paar CSS -Zeilen haben Sie eine Sleep -Flipping -Karte. Es ist nicht komplex, aber der 3D -Effekt fühlt sich vergiftet.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Flipping -Karten -Effekt mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!