Wie man eine Flip -Karte mit CSS erstellt

Auf Websites werden die Karten, die ihre Seiten auf Schwebungen drehen, als Flip -Karten bezeichnet. Eine einfache Flip -Karte besteht aus einer Vorderseite und einer Rückseite. Sie können diese Karte jedoch verwenden, um die Website attraktiv und unterhaltsam zu gestalten. Die Flip -Karte kann eine Visitenkarte, eine Produktkarte, eine Spielkarte, eine Servicekarte oder mehr sein.

Dieser Artikel zeigt die Methode zum Erstellen einer Flip -Karte mit CSS.

So erstellen/erstellen Sie eine Flip -Karte mit CSS?

Wir erstellen eine Flip -Karte, die ein Bild auf der Vorderseite und deren Rücken enthält, die die Bildbeschreibung umfasst.

Schritt 1: Erstellen Sie eine HTML -Seite

Fügen Sie zuerst ein Divelelement mit dem Namen hinzu “Flip-Container”. Dieser Behälter hält die Flip -Karte darin. Dafür:

• Fügen Sie ein DIV -Element hinzu und weisen Sie ihm einen Klassennamen als “zu“ zu “zu.“Klappkarte”.
• Platzieren Sie dann zwei Divelemente mit Klassennamen “Schriftseite" Und "Rückseite", bzw.

Wie wir oben diskutiert haben, zeigt die Vorderseite ein Bild an und die Rückseite enthält die Beschreibung des Bildes:

Baby Stufen Schuhe rosa

Neugeborenes - 12 Monate. Baby Stufen Girls 'Schuh verfügt über ein trendiges, leichtes, komfortables Paar Schuhe mit einer weichen Sohle.

Wenden wir CSS-Styling-Eigenschaften auf den oben genannten Code an.

Schritt 2: Stil „Flip-Container“ Div

.Flip-Container
Position: Relativ;
Breite: 300px;
Höhe: 300px;
Rand: Auto;

Der Flip -Behälter ist mit den folgenden CSS -Eigenschaften gestaltet:

• “PositionEigenschaft wird für die Einstellung der Position des Elements verwendet. Der Wert "relativPositioniert das Element relativ zu seiner normalen Position.
• “HöheEigenschaft definiert die Höhe des ausgewählten HTML -Elements.
• “BreiteEigenschaft bedeutet seine Breite.
• “RandDer Wert der Eigenschaft gibt den Raum um das hinzugefügte Element an.

Schritt 3: Stil „Flip-Card“ Div

.Klappkarte
Position: absolut;
Breite: 100%;
Höhe: 100%;
Transform-Stil: Preserve-3d;
Übergang: alle 0.5s Leichtigkeit;

Der "KlappkarteDas Divelelement wird unter Verwendung der folgenden CSS -Eigenschaften gestaltet:

• “Position”Eigenschaft mit dem Wert“absolutPositioniert das Element relativ zu seinem positionierten übergeordneten Element.
• “TransformationstilImmobilien werden verwendet, um den Raum seiner Kinderelemente flach oder 3D festzulegen. Der Wert "Preserve-3dGibt den 3D -Raum seiner Kinder an.
• “Übergang”Eigenschaft mit dem Wert“alle 0.5s Leichtigkeit" weist darauf hin, dass "alleEigenschaften werden mit der Übergangsdauer von “angewendet“0.5s”. Der Wert "LeichtigkeitGibt den Übergangseffekt an, um so langsam und dann schnell zu beginnen und dann wieder langsam zu gehen.

Schritt 4: Stil „Front-Seite“ und „Rückseite“ Divisionselemente

.Vorderseite,
.Rückseite
Position: absolut;
Breite: 100%;
Höhe: 100%;
Backface-Sichtbarkeit: versteckt;

Das hintere Gesicht der hinteren "verbergen"Rückseite"Div sowie die"Vorderseite"Divelelement, verwenden Sie das"Backface-Sichtbarkeit"Mit dem Wert"versteckt”.

Schritt 5: Stil „Back-Side“ Div

.Rückseite
Hintergrund: Darkcyan;
Farbe: #fff;
Border-Radius: 5px;
Text-Align: Mitte;
Schriftgröße: 25px;
Transformation: Rotatey (180 Grad);

Der "RückseiteDas Divelelement enthält die folgenden CSS -Eigenschaften:

• “HintergrundDie Eigenschaft legt die Hintergrundfarbe des Elements fest.
• “FarbeEigenschaft legt die Schriftfarbe des Elements fest.
• “Grenzradius”Eigenschaft macht die Kanten des Elements rund.
• “SchriftgrößeDie Eigenschaft wird verwendet, um die Schriftgröße des Elements anzugeben.
• “TextausrichtungDer Wert der Eigenschaft repräsentiert den Ausrichtungsstil des hinzugefügten Textes.

Die Rückseite der Karte sieht also wie folgt aus:

Wenn wir über den Kartenbehälter schweben, möchten wir, dass die Karte um 180 Grad dreht, die Rückseite enthüllt und die Vorderseite versteckt. Drehen wir also die Rückseite, indem wir das CSS verwenden “verwandeln" Eigentum.

• “verwandelnDie Eigenschaft wird verwendet, um die Transformation des Elements um die Ordinaten festzulegen. Der Wert "rotatey (180 Grad)”Wird das Element um 180 Grad um die y-Achse drehen.

Hier ist unsere Flip -Karte:

Zuletzt gehen.

Schritt 6: Stil „Flip-Card“ Div auf dem Schwebe

.Flip-Container: Schwebe .Klappkarte
Transformation: Rotatey (180 Grad);

Der ".Flip-Container: Schwebe”Bezieht sich auf den Schwebeffekt auf den Flip-Container. Wenn die Maus über die “schwebt“Flip-Container"Div, die"Klappkarte”DIV wird auch um 180 Grad drehen. Dazu das CSS “verwandeln”Eigenschaft mit dem Wert“rotatey (180 Grad)”Wird genutzt.

Hier ist also das Endergebnis:

Es ging darum, eine Flip -Karte mit CSS zu machen.

Abschluss

Die Flip -Karte ist die gemeinsame dekorative Komponente, die in jeder Webanwendung verwendet wird. Diese Karte enthält vordere und hintere Seiten. Bei schweber schwärmen es und verändert kontinuierlich seine Seiten. Dieser Flip -Effekt wird ihm durch Verwendung der “hinzugefügtverwandeln”Eigenschaft mit dem Wert“rotatey ()”Funktion. Dieser Beitrag hat das Verfahren gezeigt, um eine Flip -Karte mit CSS zu erstellen.