Come fare una flip card con CSS

Sui siti Web, le carte che capovolgono i lati su Hover sono conosciute come flip card. Una semplice flip card è costituita da un lato anteriore e un retro. Tuttavia, puoi utilizzare questa carta per rendere il sito Web accattivante e divertente. La flip card può essere un biglietto da visita, una carta di prodotto, una carta di gioco, una carta di servizio o altro ancora.

Questo articolo dimostrerà il metodo per la creazione di una flip card con CSS.

Come creare/creare una flip card utilizzando CSS?

Creeremo una flip card che contiene un'immagine sul lato anteriore e la sua schiena che comprende la descrizione dell'immagine.

Passaggio 1: crea una pagina HTML

Innanzitutto, aggiungi un elemento div con il nome "flip-container". Questo contenitore terrà al suo interno la flip card. Per questo:

• Aggiungi un elemento div e assegnalo un nome di classe come "flip-card".
• Quindi, posiziona due elementi div con nomi di classe "Font-side" E "didietro"Rispettivamente.

Come abbiamo discusso sopra, il lato anteriore visualizzerà un'immagine e il lato posteriore conterrà la descrizione dell'immagine:

Scarpe per bambini rosa

Neonato - 12 mesi. La scarpa per ragazze per bambini presenta un paio di scarpe alla moda, leggero e comodo con una suola morbida.

Applichiamo proprietà di stile CSS al codice sopra indicato.

Passaggio 2: stile "flip-container" di stile

.flip-container
Posizione: relativo;
larghezza: 300px;
Altezza: 300px;
Margine: auto;

Il contenitore Flip è disegnato con le seguenti proprietà CSS:

• "posizione"La proprietà viene utilizzata per l'impostazione della posizione dell'elemento. Il valore "parente"Posiziona l'elemento rispetto alla sua posizione normale.
• "altezza"La proprietà definisce l'altezza dell'elemento HTML selezionato.
• "larghezza"La proprietà significa la sua larghezza.
• "margine"Il valore della proprietà indica lo spazio attorno all'elemento aggiunto.

Passaggio 3: stile "flip-card" di stile

.flip-card
Posizione: assoluto;
larghezza: 100%;
Altezza: 100%;
Transform-Style: Preserve-3D;
Transizione: tutti 0.Facilità 5s;

IL "flip-card"L'elemento Div viene disegnato usando le seguenti proprietà CSS:

• "posizione"Proprietà con il valore"assoluto"Posiziona l'elemento rispetto al suo elemento genitore posizionato.
• "in stile trasformazione"La proprietà viene utilizzata per impostare lo spazio dei suoi elementi figli piatti o 3D. Il valore "Preserve-3D"Specifica lo spazio 3D dei suoi figli.
• "transizione"Proprietà con il valore"Tutti 0.Facilità 5s" indica che "Tutto"Le proprietà vengono applicate con la durata di transizione di"0.5s". Il valore "sollievo"Specifica l'effetto di transizione per iniziare come lento, quindi veloce, quindi torna indietro per rallentare.

Passaggio 4: Stile Elementi Div "Front-Side" e "Back-side"

.fronte,
.Back-side
Posizione: assoluto;
larghezza: 100%;
Altezza: 100%;
Backface-visibility: nascosto;

Per nascondere la faccia posteriore del "didietro"Div e"fronte"Elemento div, usa il"Backface-visibility"Con il valore"nascosto".

Passaggio 5: stile "back-side"

.Back-side
Sfondo: darkcyan;
Colore: #FFF;
raggio di confine: 5px;
Testo-align: centro;
Font-size: 25px;
Transform: Rotey (180DEG);

IL "didietro"Div Element contiene le seguenti proprietà CSS:

• "sfondo"La proprietà imposta il colore di sfondo dell'elemento.
• "colore"La proprietà imposta il colore del carattere dell'elemento.
• "raggio di confine"La proprietà rende i bordi dell'elemento.
• "dimensione del font"La proprietà viene utilizzata per specificare la dimensione del carattere dell'elemento.
• "allineamento"Il valore della proprietà rappresenta lo stile di allineamento del testo aggiunto.

Quindi, il retro della carta sembrerà così:

Quando ci libramo sul contenitore della scheda, vogliamo che la carta ruoti di 180 gradi, rivelando il lato posteriore e nascondendo il lato anteriore. Quindi, ruotiamo la parte posteriore utilizzando il CSS "trasformare" proprietà.

• "trasformare"La proprietà viene utilizzata per impostare la trasformazione dell'elemento attorno alle ordinate. Il valore "Rotatey (180 gradi)"Ruoterà l'elemento di 180 gradi attorno all'asse y.

Ecco la nostra flip card:

Infine, vai per aggiungere l'effetto hover alla carta.

Passaggio 6: stile "flip-card" di Div on Hover

.Flip-Container: Hover .flip-card
Transform: Rotey (180DEG);

IL ".Flip-Container: Hover"Si riferisce all'effetto hover sul flip-container. Quando il mouse si libra sul "flip-container"Div, il"flip-card"Div ruoterà anche di 180 gradi. Per fare questo, il CSS "trasformare"Proprietà con il valore"Rotatey (180 gradi)"È utilizzato.

Quindi, ecco il risultato finale:

Si trattava di creare una flip card con CSS.

Conclusione

La scheda Flip è il componente decorativo comune utilizzato in qualsiasi applicazione Web. Questa carta contiene lati anteriori e posteriori. In bilico, si lancia e cambia continuamente i suoi lati. Questo effetto di ribaltamento viene aggiunto utilizzando il "trasformare"Proprietà con il valore"rotatey ()" funzione. Questo post ha dimostrato la procedura per creare una flip card con CSS.